Estoy creando una aplicación de tarjeta flash, ya tengo una página donde uso .map() para representar todos los elementos. Ahora creé otra página para poder mostrar individualmente una tarjeta a la vez, así que en lugar de usar .map usé elementos [x] para poder incrementar en uno con un botón onClick. Cuando guardo el archivo por primera vez, la actualización en vivo funciona bien como se predijo, sin embargo, si vuelvo a cargar la página, se bloquea y dice que no puede leer la palabra propiedad de indefinido. Ahora, después de depurar un poco, descubrí que si registro la matriz en la consola al principio, aparece como cero/0 y luego se imprime de nuevo con la información, aunque llamo a la función useSelector para recopilar la información del estado antes de intentar acceder a la datos. Ahora bien, esto sucede sin importar si uso la función .map(), pero por alguna razón, la función .map() no falla y se procesa correctamente como se esperaba.
import React from "react"; import FlippableFlashcard from "../FlippableFlashcards/FlippableCard/FlippableCard.jsx"; import { Button, Container, Box } from "@mui/material"; import ArrowRightIcon from "@mui/icons-material/ArrowRight"; import ArrowLeftIcon from "@mui/icons-material/ArrowLeft"; import { useSelector } from "react-redux"; import useStyles from "./styles.js"; const Practice = () => { const classes = useStyles(); const items = useSelector((state) => state.posts); const handleAdd = () => {}; return ( <> <Container className={classes.centerDiv}> <FlippableFlashcard item={console.log(items[0])} /> {/*//This fails, but this does not <FlippableFlashcard item={items.map((item) => console.log(item))} />*/} </Container> <Box textAlign="center" className={classes.ButtonBar}> <Button onClick={handleAdd}> <ArrowLeftIcon /> </Button> <Button> <ArrowRightIcon /> </Button> </Box> </> ); }; export default Practice; específicamente este <FlippableFlashcard item={console.log(items[0])} />
Error:
FlippableCard.jsx:20 Uncaught TypeError: Cannot read properties of undefined (reading 'word') Así que sé que se debe a que el primer registro de la consola es 0/null/undefined. Intenté hacer { items && items[0] } porque vi que algunos decían que esto funcionaría pero no fue así.
Gracias a Akshay Mathur, simplemente lo hice, funciona muy bien, básicamente verifica si existen datos, si no, luego simplemente recupera los registros de la consola, en la segunda recarga automática se procesará.
{items.length ? ( <FlippableFlashcard item={items[x]} key={items[x]._id} /> ) : ( console.log("fetching data") )}Haz algo como esto:
{items.length > 0 && items.map((item,index)=>(<FlippableFlashcard item={item} key={index} />)}