React : L'utilisation de l'état comme index dans un tableau d'objets renvoie un résultat indéfini malgré la vérification
P粉481035232
P粉481035232 2024-04-03 14:12:42
0
1
409

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}</>;
};
P粉481035232
P粉481035232

répondre à tous(1)
P粉642920522

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()

É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

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal