React : L'utilisation de l'état comme index dans un tableau d'objets renvoie un résultat indéfini malgré la vérification

Question

J'ai un état et je l'utilise comme index dans un tableau d'objets. Lorsque je passe cet objet comme accessoire à un autre composant. Même avec le chèque, ça donne l'erreur :

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

Composants :

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

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

Answer 1

Voici trois solutions :

1. Mettez à jour le type de numéro dans TestingTwo en numéro |

2. Une autre solution est :

3. (Recommandé si vous savez que vous aurez toujours besoin du numéro) Mettez à jour votre interface depuis :

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

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

Supprimer l'option sur ItemNumber ?

Mettre à jour la deuxième question

Vous rencontrez également le même problème avec la définition du statut, l'interface en fait un champ facultatif.

1. Vous pouvez le rendre obligatoire en supprimant ?

2. OnClick={() => TestMenu[activeMenu]?.setState() < Mise à jour pour vérifier si setState existe un point d'interrogation< 更新为检查 setState 是否存在的问号

Édition finale

Pour obtenir ce dernier morceau, il vous suffit d'ajouter ce qui suit :

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

La raison de l'erreur est que vous ne transmettez pas la valeur à setState