Estoy tratando de enviar un accesorio en un componente una vez que mis datos se cargan desde una API. Sin embargo, a pesar de que estoy usando async await para esperar de mis datos, sigo recibiendo un error de: Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

mi proceso :

• Tener dos estados establecidos: 1) updateLoading y 2) setRecordGames
• Una vez que se carguen los datos, configuraré updateLoading en falso y luego configuraré recordGames con los datos de la API.

Mi problema : parece que cuando paso datos en el componente, React no espera a que se carguen mis datos y me da un error.

Este es mi código:

 import useLoadRecords from '../../hooks/useLoadRecords' import { CustomPieChart } from '../charts/CustomPieChart' export const GameDistribution = () => { const { records, loading } = useLoadRecords() let data = records console.log(data) // This logs out the records array return ( <div> // once loading is false, render these components {!loading ? ( <> <div> {recordGames.length > 0 ? ( // This line seem to run as soon as the page loads and I think this is the issue. recordGames is empty at first, but will populate itself when the data loads records.length > 0 && <CustomPieChart data={data} /> ) : ( <div> No games </div> )} </div> </> ) : ( <span>Loading...</span> )} </div> ) }

 // useLoadRecords.js import { useState, useEffect } from 'react' import { API } from 'aws-amplify' import { listRecordGames } from '../graphql/queries' // Centralizes modal control const useLoadRecords = () => { const [loading, setLoading] = useState(false) const [records, updateRecords] = useState([]) useEffect(() => { fetchGames() // eslint-disable-next-line react-hooks/exhaustive-deps }, []) const fetchGames = async () => { try { let recordData = await API.graphql({ query: listRecordGames, }) setLoading(false) let records = recordData.data.listRecordGames.items.map( (item) => item.name ) let result = Object.values( records.reduce((acc, el) => { if (!acc[el]) acc[el] = { name: el, plays: 0 } acc[el].plays++ return acc }, {}) ) updateRecords(result) } catch (err) { console.error(err) } } return { records, loading } } export default useLoadRecords