我有一个状态并将其用作对象数组的索引。当我将该对象作为道具传递给其他组件时。即使有检查,它也会给出错误:
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粉6429205222024-04-04 12:28:17
这里有三个解决方案:
将TestingTwo
中的number类型更新为number |未定义。
另一个解决方案是:
(如果您知道始终需要号码,则推荐)从以下位置更新您的界面:
interface 菜单 { ItemNumber?: number;项目字符串?:字符串; }
至:
界面菜单{ ItemNumber: number;项目字符串?:字符串; }
删除 ItemNumber 上的可选 ?
更新第二个问题
在设置状态上您也遇到同样的问题,界面将其作为可选字段。
您可以通过删除 ?
使其成为必需
OnClick={() => TestMenu[activeMenu]?.setState()
< 更新为检查 setState 是否存在的问号< 更新为检查 setState 是否存在的问号
最终编辑
要获得最后一点,您只需添加以下内容:
OnClick={() => TestMenu[activeMenu]?.setState(1)
错误的原因是您没有将值传递给 setState