0

Научился пользоваться fetch в рамках события componentDidMount, все работает.

componentDidMount() {
  this.updateWindowDimensions();
  window.addEventListener('resize', this.updateWindowDimensions);
  
  fetch('https://ipapi.co/json/')
  .then(response => response.json())
  .then(data => this.setState({
    center: [data.latitude, data.longitude]
  }));
};

Но реакт не разрешает такое в других ивентах, например:

 updateCenter(e, country) {
    e.preventDefault();
    const link = 'https://restcountries.eu/rest/v2/name/' + country + '?fullText=true';
    fetch(link)
    .then(response => response.json())
    .then(data => this.setState({
      center: [data.latitude, data.longitude]
    }));
  };

Получаю ошибку:

Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components

Хотелось бы как-нибудь воспользоваться данными из запроса в рамках event'а. Знает кто-нибудь как это сделать?

Render()

render() {
    return (
      <div>
        <div>
          <NavBar onSubmit={this.updateCenter} />
        </div>
        <div>
          <Map 
            center={this.state.center}
            zoom={this.state.zoom} 
            height={this.state.height - 70} 
            width={this.state.width} 
          />
        </div>
      </div>
    );
  };

5
  • 1
    а покажите как выглядет render()?
    – sneas
    7 сен 2019 в 16:19
  • 1
    ошибка не про фетч, а про то что у вас инпут, который ни как не контролируется ( нет обработчика, но при этом туда записывается какое-то значение )
    – ThisMan
    7 сен 2019 в 17:00
  • 1
    нужен код render
    – ThisMan
    7 сен 2019 в 17:01
  • Ошибка про фетч, мой инпут контролируется в дочернем компоненте. 8 сен 2019 в 6:04
  • Извиняюсь, не рассчитывал, что ответы будут так скоро. Поэтому закрыл все и пошел заниматься сторонними вещами. 8 сен 2019 в 6:09

3 ответа 3

1

Запроcы должны делаться перед render. Так как нужно время для его получения и затем обработки. в componentDidMount(). Вызывайте в нем метод, либо смотрите ЖЦ React

7
  • Да, но можно же добавить задержку, пока данные запрашиваются. Данные запрашиваются, зависимо от названия страны введенной в input. Это убийство времени, прописывать характеристики о каждой стране. Можно написать, конечно скрипт, который соберет их на стороне сервера, но хотелось бы как-то лениво получать это, чтобы их не хранить. 8 сен 2019 в 6:13
  • Все верно. Я так понимаю вы принимаете массив данных. Скорее всего у вас проблемы с определением массива. Нужен ввесь код, а не отрывки. Вот это вам поможет stackoverflow.com/questions/37427508/…
    – dev_habr
    8 сен 2019 в 6:58
  • С массивом я еще ничего не делал. Такие проблемы решаются, на самом деле, просто через console.log() C: Я уверен, что проблема в fetch, в том что, запросы делаются после render. Уверен также, что должен быть обходной путь, чтобы не запрашивать тучу данных в самом начале, а делать это уже после componentDidMount, например: на onSubmit. 8 сен 2019 в 7:49
  • 1
    Решение будет таким. Создайте костомный компонент с помощью props input.js со своим componentDidMount. В главном файле будут подаваться данные для поиска в костомный компонент, а в input.js будет искать. scotch.io/tutorials/…
    – dev_habr
    8 сен 2019 в 9:30
  • 1
    Это хорошая практика. Которая позволяет гибко работать с проектами.Всегда стремитесь ее использовать. Так как она уменьшает код и позволяет использовать компонент в нескольких местах.
    – dev_habr
    8 сен 2019 в 17:20
0

Input в дочернем компоненте был контролируемым. Когда ссылка обработчика события onSubmit родительского компонента передавалась в дочерний, React принимал это как изменение состояния.

В родительском компоненте код не менял.

Код дочернего компонента, корректный:

export default function NavBar(props) {
    const classes = useStyle();
    let _searchInput = React.createRef();

    return(
        <div className={classes.root}>
            <AppBar position="static" className={classes.appbar}>
                <Toolbar>
                    <form onSubmit={(e) => props.onSubmit(e, _searchInput.ownerDocument.activeElement.value)}>
                        <div className={classes.search}>
                            <div className={classes.searchIcon}>
                                <SearchIcon />
                            </div>
                            <InputBase
                                placeholder="search"
                                inputProps={{ 'aria-label': 'search'}}
                                classes={{
                                    root: classes.inputRoot,
                                    input: classes.inputInput,
                                }}
                                name='search'
                                ref={ input => _searchInput = input } 
                            />
                        </div>
                    </form>
                </Toolbar>
            </AppBar>
        </div>
    );
};

Полезные ссылки:

https://reactjs.org/docs/uncontrolled-components.html

https://scotch.io/tutorials/5-most-common-dropdown-use-cases-solved-with-react-downshift

0

В componentWillMont создай переменую например this.unmont = false;

componentWillMont(){
    this.unmount = false;
}
 componentWillUnmont(){
    this.unmont = true;
}

И когда хочешь сделать setstate после запроса проверь this.unmont чтобы было ровно false Пример

updateCenter(e, country) {
    e.preventDefault();
    const link = 'https://restcountries.eu/rest/v2/name/' + country + '?fullText=true';
    fetch(link)
    .then(response => response.json())
    .then(data => 
      if(!this.unmont){
         this.setState({
         center: [data.latitude]             
    })
}
);
  };

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.