Как сделать проверку для ввода?

Question

Я делаю простое приложение, в котором у пользователя есть возможность найти mov ie (с OMDB API). Я так и сделал. Но когда я ввожу несуществующий mov ie, у меня появляется неопределенная ошибка карты. И это логично, потому что массив с такими данными не существует. Как выполнить проверку, чтобы уведомить пользователя об ошибке.

Функция поиска

const [state, setState] = useState({
    s: '',
    response: [],
    selected: {}
  });

  const apiURL = 'http://www.omdbapi.com/?apikey=73f30b51'

  const searchFilm = e => {
    if(e.key === 'Enter'){
      axios(apiURL + "&s=" + state.s).then(({data}) => {
        let response = data.Search;
        setState(prevState => {
          return  {...prevState, response: []},
                  {...prevState, response: response}
        })
      })
    } 
  }

Фильтр ( ошибка карты )

const Result = ({response,openCurrentMovie}) => {
    return(
        <div className="results">
            {response.map(result => (
            <Movie key={result.imdbID} result={result} openCurrentMovie={openCurrentMovie}/>
            ))}
        </div>
    )
}

Answer 1

Просто проверьте, есть ли что-то в response в вашей функции рендеринга:

const Result = ({response,openCurrentMovie}) => {
    if (!response) return <div>Sorry bro, no movie found</div>
    return(
        ...

Answer 2

, если response = data.Search; не определено, вы можете установить состояние ошибки и использовать его для отправки сообщения вашему пользователю.

const [error, setError] = useState(null); // use error value to render a component to show error

 const searchFilm = e => {
    if(e.key === 'Enter'){
      axios(apiURL + "&s=" + state.s).then(({data}) => {
        let response = data.Search;
        if(!response){
           setError(true) // setting the error as true. You can give some specific message as well
        }
        setState(prevState => {
          return {...prevState, response: response}
        })
      })
    } 
  }