cada vez que trato de mostrar datos de la API usando .map, ocurre este error.
la parte de datos a la que quiero acceder desde la API es una matriz. si no es una matriz, ¿hay alguna forma de convertirla en una matriz de objetos? y aquí está mi app.js
import React from "react"; import { useState } from "react"; export default function App() { const [data, setData] = useState([]); async function fetchData() { const response = await fetch( "https://opentdb.com/api.php?amount=5&type=multiple" ); const data = await response.json(); const [item] = data.results; setData(item); } return ( <div className="app"> <h1>question generate </h1> <button onClick={fetchData}>new question</button> {data && data.map((quiz, index) => { return ( <div className="queations"> <p>{quiz.question}</p> <button onClick={boo} key={index}> {quiz.correct_answer} </button> <button>{quiz.incorrect_answers}</button> <button>{quiz.incorrect_answers}</button> <button>{quiz.incorrect_answers}</button> </div> ); })} </div> ); }const [elemento] = datos.resultados; línea que causa un error ya que guarda solo el primer objeto en el estado. Así que simplemente reemplace por const item = data.results;
Primero debe declarar una interfaz:
interface Data { question: string; correct_answer: string; // ...Y luego utilícelo para escribir el estado:
const [data, setData] = useState<Data[]>([]);Después de esto todo debería funcionar bien.
este código const [item] = data.results; crear variable de item (primer elemento de la matriz), necesita crear interfaz
interface Data { question: string; correct_answer: string; incorrect_answers: string[]; } y almacene los resultados directamente en el estado setData(data.results as Data[]);