首页  >  问答  >  正文

React:尽管进行了检查,但使用状态作为对象数组的索引仍然返回未定义

我有一个状态并将其用作对象数组的索引。当我将该对象作为道具传递给其他组件时。即使有检查,它也会给出错误:

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

组件:

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

export const TestingTwo = ({ number, OnClick }: TestingTwoProps) => {
  return <>{number}</>;
};
P粉481035232P粉481035232221 天前343

全部回复(1)我来回复

  • P粉642920522

    P粉6429205222024-04-04 12:28:17

    这里有三个解决方案:

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

    2. 另一个解决方案是:

    3. (如果您知道始终需要号码,则推荐)从以下位置更新您的界面:

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

      界面菜单{ ItemNumber: number;项目字符串?:字符串; }

    删除 ItemNumber 上的可选 ?

    更新第二个问题

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

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

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

    最终编辑

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

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

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

    回复
    0
  • 取消回复