Повторно визуализировать компонент React обратно в исходное состояние

Question

У меня есть этот компонент, который возвращает кучу li по запросу get axios, пользователь вводит текст, и поиск обновляется. Я хочу, чтобы React повторно визуализировал компонент, когда searchInput имеет значение null, в основном обратно в исходное состояние.

  class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      searchResults: [], // API Call returns an array of results
      searchInput: '', // Search Term for API Call
            searchImage: [] //base_url, a file_size and a file_path.
    }
  }


performSearch = () => { // Requesting data from API
    axios.get(`${URL}api_key=${API_KEY}&language=en-US&query=${this.state.searchInput}${PARAMS}`)
        .then((res) => {
            console.log(res.data.results);
            this.setState({ searchResults: res.data.results});
        });
}

Эта функция, приведенная ниже, вызывает рендеринг

   handleInputChange = () => {
        this.setState({
            searchInput: this.search.value // User input
        }, () => {
            if (this.state.searchInput && this.state.searchInput.length >1 ) {
                if (this.state.searchInput.length % 2 === 0) { // Request data on user input
                    this.performSearch();
                } else if (this.state.searchInput && this.state.searchInput.length === 0 ) {
                    return ({ searchResults: null}) 
                }
            }
        });
    }




import React from 'react'

const Suggestions = (props) => {
  const options = props.searchResults.map(r => (
    <li
      key={r.id} >
      <img src={`https://image.tmdb.org/t/p/w185/${r.poster_path}`} alt={r.title} />
      <a href='#t' className='rating'><i className='fas fa-star fa-fw' />{r.vote_average}</a>
    </li>
  ))
  return <ul className='search-results'>{options}</ul>
}

export default Suggestions

На данный момент проблема заключается в том, что если я что-то ищу, например, «игра престолов», то это делает лиОднако, если я очищаю его обратно в пустую строку, я все равно оставляю li ... Я не хочу ничего видеть, если searchInput имеет значение null

Edit: executeSearch снова запускается при очистке searchInput и возвращаетпоследние два символа, которые оставляют меня с

Answer 1

Вы не обработали условия правильно в методе handleInputChange.Если внешнее условие терпит неудачу, внутреннее никогда не будет выполнено

 handleInputChange = () => {
    this.setState({
        searchInput: this.search.value // User input
    }, () => {
        if (this.state.searchInput && this.state.searchInput.length >1 ) {
            if (this.state.searchInput.length % 2 === 0) { // Request data on user input
                this.performSearch();
            }
        } else {
             this.now = Date.now();
             this.setState({ searchResults: []}) 
        }
    });
}

Также проблема здесь могла бы быть состоянием гонки с вызовами API.Может случиться так, что, когда вы очищаете ввод, хотя вы устанавливаете значение null или пусто, API затем отвечает, что снова устанавливает состояние.Лучший способ обработки - это принять только тот ответ, который соответствует последнему выполненному запросу

performSearch = () => { // Requesting data from API
    let now = (this.now = Date.now());
    axios.get(`${URL}api_key=${API_KEY}&language=en-US&query=${this.state.searchInput}${PARAMS}`)
        .then((res) => {
            console.log(res.data.results);
            // Accepting response if this request was the last request made
            if (now === this.now) {
               this.setState({ searchResults: res.data.results});
            }
        });
}