Estoy tratando de representar un componente dentro de un archivo de componente que se basa en datos de una API externa. Básicamente, mi devolución en mi componente usa un componente que está esperando datos, pero aparece un error de que dataRecords no está definido y, por lo tanto, no se puede mapear.
Espero que mi código explique esto mejor:
// Component.js export const History = () => { const [dateRecords, setDateRecords] = useState(0) const { data, loading } = useGetRecords() // A custom hook to get the data useEffect(() => { fetchData() }, [loading, data]) const fetchData = async () => { try { let records = await data setDateRecords(records) } catch (err) { console.error(err) } } // Below: Render component to be used in the component return const GameItem = ({ game }) => { return <div>{game.name}</div> } // When I map over dateRecords, I get an error that it is undefined const renderRecords = async (GameItem) => { return await dateRecords.map((game, index) => ( <GameItem key={index} game={game} /> )) } const GameTable = () => { return <div>{renderRecords(<GameItem />)}</div> } return( // Don't display anything until dateRecords is loaded {dateRecords? ( // Only display <GameTable/> if the dateRecords is not empty {dateRecords.length > 0 && <GameTable/> ) ) }Si dateRecords está destinado a ser una matriz, inicialícelo en una matriz en lugar de un número:
const [dateRecords, setDateRecords] = useState([]); En este caso, cuando se realiza la operación API, cualquier cosa que intente iterar sobre dateRecords simplemente iterará sobre una matriz vacía, sin mostrar nada.
Estableció el estado inicial de dateRecords en 0, que es un número y no es iterable. Debe establecer el estado inicial en una matriz vacía:
const [dateRecords, setDateRecords] = useState([]);