Bertindak balas: Menggunakan keadaan sebagai indeks ke dalam tatasusunan objek mengembalikan tidak ditentukan walaupun diperiksa

Question

Saya mempunyai keadaan dan menggunakannya sebagai indeks ke dalam tatasusunan objek. Apabila saya menghantar objek itu sebagai prop kepada komponen lain. Walaupun dengan cek, ia memberikan ralat:

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

Komponen:

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

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

Answer 1

Berikut adalah tiga penyelesaian:

1. Kemas kini jenis nombor dalam TestingTwo kepada nombor |.

2. Penyelesaian lain ialah:

3. (Disyorkan jika anda tahu anda akan sentiasa memerlukan nombor tersebut) Kemas kini antara muka anda daripada:

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

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

Alih keluar pilihan pada ItemNumber ?

Kemas kini soalan kedua

Anda juga menghadapi masalah yang sama dengan menetapkan status, antara muka menjadikannya medan pilihan.

1. Anda boleh membuatnya diperlukan dengan mengeluarkan ?

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

Suntingan Akhir

Untuk mendapatkan bit terakhir itu, anda hanya menambah yang berikut:

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

Sebab ralat ialah anda tidak menghantar nilai kepada setState