0
288
Visualizaçõesfind (...) no está definido al obtener datos con una URL dinámica usando next.js
Cuando busco datos en mi página principal, todo funciona como quería, pero cuando busco datos en otra carpeta usando el mismo código pero con una URL dinámica, aparece un error cuando intento usar métodos en la matriz. Cuando consola.log obtuve datos, obtuve la misma matriz que en mi página principal
Cuando elimino el enlace y solo quiero ver book.title , funciona. Pero recibí un error cuando quiero obtener datos de los recursos.
página principal.js
const [data, setData] = useState(null); const [isLoading, setLoading] = useState(false); useEffect(() => { setLoading(true); fetch('https://gnikdroy.pythonanywhere.com/api/book') .then((res) => res.json()) .then((data) => { setData(data); setLoading(false); }); }, []); return( <div> {data.results.map((book, index) => ( <div key={index}> <h1>{book.title}</h1> <Link href={`/reader/${book.id}`} passHref> <h2> { book.resources.find( ({ type }) => type === 'application/epub+zip' ).uri } </h2> </Link> </div> ))} </div> )searchPage.js
const router = useRouter(); const { name } = router.query; const [data, setData] = useState(null); const [loading, setLoading] = useState(false); useEffect(() => { setLoading(true); fetch(`https://gnikdroy.pythonanywhere.com/api/book/?search=${name}`) .then((res) => res.json()) .then((data) => { setData(data); setLoading(false); console.log(data); }); }, []); return( <div> {data.results.map((book, index) => ( <div key={index}> <h1>{book.title}</h1> <Link href={`/reader/${book.id}`} passHref> <h2> { book.resources.find( ({ type }) => type === 'application/epub+zip' ).uri } </h2> </Link> </div> ))} </div> )
mi console.log dentro de buscar en searchPage.js
2 Respostas
Responde à pergunta0
Sus datos de respuesta no obtienen campos de recursos en algún momento.
Es por eso que book.resources puede ser indefinido (o) nulo.
Puede usar fácilmente Cambio opcional (?.)
Reemplazar:
{ book.resources?.find( ({ type }) => type === 'application/epub+zip' )?.uri || '' }0
Además de la respuesta de Wu Woo, cuando considere cómo React renderiza su código,
Primero ejecutará el return y luego useEffect solo en la carga de la página, ya que no tiene valores en la matriz de dependencia useEffect .
Entonces, en su escenario, tiene data = null en la carga de la página inicial. Entonces, cuando se renderiza debajo del código, dado que data = null data.results no puede usar Arrays.map().
Luego ejecutará useEffect y dentro de allí establecerá el retorno de valor de la llamada API y establecerá ese valor en datos.
Para evitar ese error de procesamiento indefinido, debe asegurarse de que los data.results no sean iguales a nulo/indefinido y, cuando haya data.results , los resultados representen lo que desea.
Puede lograrlo de las siguientes maneras.
El operador de encadenamiento opcional (?.) Como respuesta de Wu Woo, que simplifica el acceso a valores a través de objetos conectados cuando es posible que una referencia o función no esté
undefined or null. Entonces no dará el error anterior cuandobook.resourcesigual a nulo/indefinido.renderice solo cuando haya valor para
data.resultsybook.resourcesde lo contrario, no como a continuación.// Here conditionally check whether there is value for data?.results and if so render this. {data?.results && data.results.map((book, index) => ( <div key={index}> <h1>{book.title}</h1> <Link href={`/reader/${book.id}`} passHref> <h2> {/* Here also conditionally check whether there is value for book?.resources and if so render this. */} { book?.resources && book.resources.find( ({ type }) => type === 'application/epub+zip' ).uri } </h2> </Link> </div> ))}