Estoy tratando de llamar a una función asíncrona usando .map() en REACT para completar las celdas de datos de la tabla. La función asíncrona está llamando al backend de mi aplicación utilizando datos de la matriz que se está iterando.
La función que se está llamando devuelve un número cuando se llama correctamente. Esta es la primera vez que publico una pregunta, así que cualquier ayuda es genial. Si necesito agregar más información lo haré.
Gracias.
{tableInfo.map(info => ( <tr> <td key={info.name}>{info.name}</td> <td key={info.price}>{info.price}</td> <td key={info.amount}>{info.amount}</td> <td> {async () => await fetchCurrentPrice.getPrice(info.name)} </td> </tr> ))}Las funciones async siempre devuelven promesas. No puede obtener datos de forma asíncrona durante la representación.
Necesita un gancho useEffect para ejecutar la función que recopila los datos y luego un gancho useState para almacenarlos, junto con la lógica para mostrar un estado de carga mientras lo espera.
const MyRow = ({ info }) => { const [currentPrice, setCurrentPrice] = useState(null); useEffect(() => { fetchCurrentPrice.getPrice(info.name).then(setCurrentPrice); }, [info]); return <tr> <td key={info.name}>{info.name}</td> <td key={info.price}>{info.price}</td> <td key={info.amount}>{info.amount}</td> <td>{currentPrice ?? <Loading />}</td> </tr> }con
{tableInfo.map(info => <MyRow key={info.name} info={info} />)}Use un componente separado para la etiqueta tr y llámelo dentro.
const Component = (props) => { const {info} = props useEffect(() => { // call your api and set it to state }, []) return <tr> <td key={info.name}>{info.name}</td> <td key={info.price}>{info.price}</td> <td key={info.amount}>{info.amount}</td> <td> {async () => await fetchCurrentPrice.getPrice(info.name)} </td> </tr> } {tableInfo.map(info => <Component info={info} />)}