ReactJs:Uncaught TypeError:无法读取未定义的属性(读取“0”)

payload countTargetOptions ,我将在组件中显示它。

但我一直得到一个 Uncaught TypeError: Cannot read properties of undefined (reading '0') 当我试图显示数据时 {payload[0]?.payload?.countTargetOptions[i]} ? 阅读后 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;
  }