import { useState, useEffect } from "react"; export default function RenderTable(){ const [tableData, updateTableData] = useState([{id: 1, name: "name", price: 200, size: "size"}]); useEffect(()=>{ fetch("/api/ManageSite").then(value => updateTableData(value.json())); }, []); return( <table> <tbody> {tableData.map(value => <tr key={value.id}> <td>{value.name}</td> <td>{value.price}</td> <td>{value.size}</td> </tr> )} </tbody> </table> ) } este error ocurre cuando uso la función de mapa en return() , pero si hago la misma función de mapa en useEffect() , funcionará bien, explique por qué.
Esto podría suceder porque está tratando de mapear un objeto y no una matriz, por lo que dice que no existe la función Object.map().
Primero, asegúrese de que el nuevo estado sea una matriz.
Luego, si puede obtener resultados diferentes de una matriz, al renderizar, para que no se bloquee la página, asegúrese de que está haciendo un mapa en una matriz
{Array.isArray(tableData) && tableData.map(()=>{}).json() devuelve una promesa, lo que significa que en ES6 necesita usar otro then . Asegúrese de que la respuesta del backend sea una matriz en formato JSON.
Entonces puedes simplemente:
useEffect(()=>{ fetch("/api/ManageSite") .then(value => value.json()) .then(data => updateTableData(data)) }, []);Porque no importa qué, incluso si obtiene y actualiza datos como lo hice correctamente, pero su respuesta de punto final no es una matriz. Seguirá ocurriendo el mismo error