Estoy haciendo una aplicación simple, donde el usuario tiene la oportunidad de encontrar películas (con la API de OMDB). Entonces lo hice. Pero cuando entro en una película inexistente, tengo un error de mapa indefinido. Y esto es lógico, porque no existe una matriz con tales datos. Cómo hacer una validación para notificar al usuario de un error.

Función de búsqueda

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}
        })
      })
    } 
  }

Filtro ( error de mapa )

const Result = ({response,openCurrentMovie}) => {
    return(
        <div className="results">
            {response.map(result => (
            <Movie key={result.imdbID} result={result} openCurrentMovie={openCurrentMovie}/>
            ))}
        </div>
    )
}
1
Богдан Чубко 1 may. 2020 a las 21:03

2 respuestas

Si response = data.Search; no está definido, puede establecer un estado de error y utilizarlo para enviar un mensaje a su usuario.

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}
        })
      })
    } 
  }
0
Jagrati 1 may. 2020 a las 18:10

Simplemente verifique si hay algo en response en su función de renderizado:

const Result = ({response,openCurrentMovie}) => {
    if (!response) return <div>Sorry bro, no movie found</div>
    return(
        ...
0
HermitCrab 1 may. 2020 a las 18:11