Элементы, отображаемые, когда запрос пуст в реакции - PullRequest
Новая
       16

Элементы, отображаемые, когда запрос пуст в реакции

0 голосов
/ 29 мая 2018

Я учусь реагировать, и я сделал пример приложения для телешоу, используя пример из freecodecamp.Все работает хорошо, как я вижу, однако, после поиска чего-либо и возврата всего содержимого в поле поиска, он показывает результаты, когда этого не должно быть, может кто-нибудь увидеть ошибку, которую я допустил в моем коде? 

class SeriesList extends React.Component {
  state = {
    series: [],
    query: ''
  }

  onChange = async e => {
    this.setState({query: e.target.value});
    const response = await fetch(
      `https://api.tvmaze.com/search/shows?q=${this.state.query}`
    );
    const data = await response.json();
    this.setState({series: data});
  }

  render(){
    return (
      <div>
        <input type="text" onChange={this.onChange} value={this.state.query} />
        <ul>
          <SeriesListItem list={this.state.series} />
        </ul>
      </div>
    );
  }
}

У меня здесь есть кодекс.

https://codepen.io/crash1989/pen/ERxPGO

спасибо

Ответы [ 3 ]

0 голосов
/ 29 мая 2018

Еще одна точка, которую вы можете использовать await для setState 

onChange = async e => {    
    await this.setState({query: e.target.value});
    const response = await fetch(
      `https://api.tvmaze.com/search/shows?q=${this.state.query}`
    );
    const data = await response.json();
    this.setState({series: data});
  }

Ваш запрос будет выполнен после изменения запроса

0 голосов
/ 29 мая 2018

Проблема

Существуют условия гонки: при вводе двух + букв вы делаете два + сетевых звонка.Первый сетевой вызов может быть последним завершенным, а затем вы показываете результаты для неправильного запроса.

Я исправил это в этой ручке: https://codepen.io/arnemahl/pen/zaYNxv

Решение

Сохранитьотслеживание результатов по всем запросам, на которые вы когда-либо получали ответ.Всегда, как данные возвращаются для текущего запроса.(Кроме того, мы не знаем, что несколько вызовов API для одного и того же запроса). 

state: {
  seriesPerQuery: {}, // Now a map with one result for each query you look up
  query: [],
}

...

onChange = async e => {
  ...

  // Now keep the results of the old querys, in addition to the new one
  // whenever you get an API response
  this.setState(state => ({
    seriesPerQuery: {
      ...state.seriesPerQuery,
      [query]: data,
    }
  }));
}
0 голосов
/ 29 мая 2018

setState работает асинхронно.Таким образом, нет гарантии, что this.state.query был обновлен после вызова this.setState({query: e.target.value}).Таким образом, ваш URL в конечном итоге содержит предыдущее состояние.

Есть два варианта:

  1. Использовать данные события для нового запроса: 

    const response = await fetch(
   `https://api.tvmaze.com/search/shows?q=${e.target.value}`
);
...

  2. Используйте второй обратный вызов setState arg 

    this.setState({query: e.target.value}, () => {
  const response = await fetch(
    `https://api.tvmaze.com/search/shows?q=${this.state.query}`
  );
  ...
})

Это хорошая статья об асинхронной природе setState https://medium.com/@wereHamster/beware-react-setstate-is-asynchronous-ce87ef1a9cf3.

...