Tengo el siguiente JSON que quiero asignar a tarjetas MUI. No recibo ningún mensaje de error, pero no se muestra nada. El console.log(questionGroups) solo muestra el JSON después de cambiar algún código no relacionado para provocar una recarga en vivo.
const [questionGroups, setQuestionGroups] = useState(""); const fetchQuestionGroups= async () => { setQuestionGroups( await fetch(`API_LINK`).then((response) => response.json()) ); console.log(questionGroups); }; useEffect(() => { fetchQuestionGroups(); }, []); ... <Box className={classes.cards}> {questionGroups?.displaygroups?.IntakeQuestion?.map((group, groupIndex) => { return ( <Card className={classes.card1}> <CardHeader title={group.GroupName} /> </Card> ); })} </Box>Esta es una muestra de mi JSON:
{ "displaygroups": { "IntakeQuestions": [ { "GroupId": 11, "GroupName": "Group 1", "SizingId": null, "OwnerName": "Jane Doe", "Questions": 0, "Answered": null, "Validated": null } ] } }Utilice && en lugar de ?
<Box className={classes.cards}> {questionGroups && questionGroups.displaygroups && questionGroups.displaygroups.IntakeQuestions.map((group, groupIndex) => { return ( <Card className={classes.card1}> <CardHeader title={group.GroupName} /> </Card> ); })} </Box>Debe establecer el estado una vez que los datos estén disponibles.
const fetchQuestionGroups= async () => { const data = await fetch(`API_LINK`) const temp = response.json() setQuestionGroups(temp); console.log(questionGroups); };