React:儘管進行了檢查,但使用狀態作為物件數組的索引仍然會傳回未定義
P粉481035232
P粉481035232 2024-04-03 14:12:42
0
1
358

我有一個狀態並將其用作物件數組的索引。當我將該物件作為道具傳遞給其他組件時。即使有檢查,它也會給出錯誤:

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粉481035232
P粉481035232

全部回覆(1)
P粉642920522

這裡有三個解決方案:

  1. TestingTwo中的number類型更新為number |未定義。

  2. 另一個解決方案是:

  3. #(如果您知道始終需要號碼,則建議)從以下位置更新您的介面:

    interface 選單 { ItemNumber?: number;項目字串? :字串; } 至:

    介面選單{ ItemNumber: number;項目字串? :字串; }

刪除 ItemNumber 上的可選 ?

更新第二個問題

#在設定狀態上您也遇到相同的問題,介面將其作為可選欄位。

  1. 您可以透過刪除 ? 使其成為必要

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

最終編輯

要獲得最後一點,您只需添加以下內容:

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

錯誤的原因是您沒有將值傳遞給 setState

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板