我有一個狀態並將其用作物件數組的索引。當我將該物件作為道具傳遞給其他組件時。即使有檢查,它也會給出錯誤:
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}</>; };
這裡有三個解決方案:
將
TestingTwo
中的number類型更新為number |未定義。另一個解決方案是:
#(如果您知道始終需要號碼,則建議)從以下位置更新您的介面:
interface 選單 { ItemNumber?: number;項目字串? :字串; }
至:介面選單{ ItemNumber: number;項目字串? :字串; }
刪除 ItemNumber 上的可選
?
更新第二個問題
#在設定狀態上您也遇到相同的問題,介面將其作為可選欄位。
您可以透過刪除
?
使其成為必要#OnClick={() => TestMenu[activeMenu]?.setState()
最終編輯
要獲得最後一點,您只需添加以下內容:
OnClick={() => TestMenu[activeMenu]?.setState(1)
錯誤的原因是您沒有將值傳遞給 setState