Reagieren: Die Verwendung des Status als Index in einem Array von Objekten gibt trotz Überprüfung undefiniert zurück

Question

Ich habe einen Zustand und verwende ihn als Index für ein Array von Objekten. Wenn ich dieses Objekt als Requisite an eine andere Komponente übergebe. Auch bei der Prüfung kommt der Fehler:

import React, { Dispatch, useState } from 'react';

import { TestingTwo } from './TestingTwo';

interface Menu {
  ItemNumber?: number;
  ItemString?: string;
  setState?: Dispatch<React.SetStateAction<number>>;
}

export const TestingPage = () => {
  const [activeMenu, setActiveMenu] = useState<number>(1);
  const [something, SetSomething] = useState<number>(0);
  const TestMenu: Menu[] = [
    {
      ItemNumber: 1,
      ItemString: 'test',
      setState: SetSomething,
    },
  ];
  return (
    <>
      {TestMenu && TestMenu[activeMenu] && TestMenu[activeMenu].ItemNumber ? (
        <TestingTwo
          number={TestMenu[activeMenu].ItemNumber || 0}

          OnClick={() => TestMenu[activeMenu].setState(1)}
//Cannot Invoke an object which is possibly 'undefined'

        />
      ) : null}
    </>
  );
};

Komponenten:

interface TestingTwoProps {
  number: number;
  OnClick: () => void;
}

export const TestingTwo = ({ number, OnClick }: TestingTwoProps) => {
  return <>{number}</>;
};

Answer 1

这里有三个解决方案：

1. 将TestingTwo中的number类型更新为number |未定义。

2. 另一个解决方案是：

3. （如果您知道始终需要号码，则推荐）从以下位置更新您的界面：

   interface 菜单 { ItemNumber?: number;项目字符串？：字符串； } 至：

   界面菜单{ ItemNumber: number;项目字符串？：字符串； }

删除 ItemNumber 上的可选 ?

更新第二个问题

在设置状态上您也遇到同样的问题，界面将其作为可选字段。

1. 您可以通过删除 ? 使其成为必需

2. OnClick={() => TestMenu[activeMenu]?.setState() < 更新为检查 setState 是否存在的问号

最终编辑

要获得最后一点，您只需添加以下内容：

OnClick={() => TestMenu[activeMenu]?.setState(1)

错误的原因是您没有将值传递给 setState