Estoy tratando de acceder a la clave y los valores en la payload en mis datos JSON, y si la clave está presente en la matriz, countTargetOptions , la mostraré en un componente.

Pero sigo recibiendo un Uncaught TypeError: Cannot read properties of undefined (reading '0') cuando trato de mostrar los datos {payload[0]?.payload?.countTargetOptions[i]} ? Reaccionar: TypeError no capturado: no se pueden leer las propiedades de undefined (leyendo '0') pero aún no funciona).

Antes de intentar renderizar los componentes en un bucle, no hubo problemas. Vea a continuación mi código y una foto de los datos de carga útil.

 const countTargetOptions = [ "count_targets", "count_targets_excluded", "count_targets_pending", "count_targets_in_progress", "count_targets_completed", "count_targets_failed", ]; const CustomTooltip = ({ payload}: TooltipProps<ValueType, NameType> | any) => { if( payload && payload.length){ var targetsData = []; let payloadData: any = payload[0].payload; for(let i = 0; i < countTargetOptions.length; i++){ if(payloadData.hasOwnProperty(countTargetOptions[i])){ let targetOption: string = countTargetOptions[i].replaceAll('_', ' '); targetsData.push( <Typography key = {targetOption} sx={{ fontSize: 14 }} color={"black"} > {targetOption} : {payload[0]?.payload?.countTargetOptions[i]} </Typography> ) } } return ( <> <Card> <CardContent> {targetsData} //Example of what wored before loop {/* <Typography sx={{ fontSize: 14 }} color={"black"} > count targets : {payload[0].payload.count_targets} </Typography> */} </CardContent> </Card> </> ); } return null; }