我试图访问 JSON 数据中 payload 中的键和值，如果键存在于数组 countTargetOptions 中，我将在组件中显示它。

但是当我尝试显示数据 {payload[0]?.payload?.countTargetOptions[i]> 时，我一直收到 Uncaught TypeError: Cannot read properties of undefined (reading '0') （注意：在阅读 React: Uncaught TypeError: Cannot read properties of undefined (reading '0') 后，我添加了 ? ，但它仍然不起作用）。

在我尝试循环渲染组件之前，没有问题。请参阅下面的代码和有效载荷数据的照片。

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;
  }