Tengo tanto una matriz como la matriz de estado.
const [formData, setFormData] = useState([]); let ure = [{}] useEffect(() => { axios .get("/api/listUre") .then((res) => { console.log(res.data) //setFormData(res.data); ure.push({ class_id: res.data.class_id }) }) .catch((error) => { // Handle the errors here console.log(error); }) .finally(() => { }); }, []); una vez que hago eso, ahora quiero acceder a class_id desde dentro de una tabla:
{ure.length > 0 && ure.map((obj, index) => { <tr key={index}> <td> {obj.class_id} </td> <td> {obj.class_id} </td> <td> My Name </td> </tr> })} {ure.length === 0 && "No Data Found"} No estoy seguro de lo que estoy haciendo mal, pero no está enviando nada a la página. y sé que la matriz ure tiene datos porque no muestra "No Data Found" en la pantalla, por lo que debería estar funcionando. ¿Puede alguien ayudarme?
Creo que necesita que ure sea una parte del estado, de lo contrario, su matriz ure seguirá siendo reevaluada cada vez que su componente se vuelva a renderizar.
Entonces, el primer paso sería:
const [ure, setUre] = useState([]); Luego, para cambiar ure , solo haz algo como:
setUre(currUre => { return currUre.concat([{ foo: bar }]); }) Luego, para iterar sobre él, no debería necesitar verificar la length > 0 , solo el map() hará el truco.
La razón por la que está viendo ese resultado (sin tabla pero sin matriz vacía) es porque está inicializando let ure = [{}] , que es una matriz de tamaño 1 con un objeto vacío en ella.