Comment mettre à jour l'état dans l'événement onChange en cas d'objet tableau

Question

J'ai quelques statuts :

const [budget, setBudget] =
    React.useState<{ name: string; budget: number | null }[]>();

J'essaie d'utiliser un TextField pour mettre à jour cet état en fonction du nom et de la valeur du champ de saisie :

budget.map((item) => {
      content.push(
        <TextField
          name={item.name}
          id={item.name}
          label={item.name}
          type="tel"
          onChange={handleChange}
        />
      );
    });

Je sais que c'est une situation étrange, mais les champs de saisie ne sont pas des valeurs prédéterminées, je dois donc les restituer dynamiquement, ce qui rend la vie difficile.

J'ai essayé la fonction onChange suivante mais cela ne fonctionne pas :

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => () => {
    const newOne = budget?.map((item) =>
      Object.entries(item).map(([key, value]) => {
        if (key === event.target.name) {
          return [key, event.target.value];
        }
        return [key, value];
      })
    );
    setBudget(newOne);
  };

J'ai accidentellement créé beaucoup de tableaux et j'ai obtenu l'erreur suivante (je ne sais pas comment renvoyer uniquement les clés et les valeurs) :

Argument of type '(string | number | null)[][][] | undefined' is not assignable to parameter of type 'SetStateAction<{ name: string; budget: number | null; }[] | undefined>'.

Answer 1

Je pense que le problème est que vous utilisez une fonction à double flèche à l'intérieur de la fonction handleChange, ce qui signifie que lorsque l'événement se produit, la fonction interne n'est pas réellement exécutée. Vous devez supprimer les flèches supplémentaires.

Un autre problème est que vous convertissez map函数中返回了一个数组的数组，这与你的状态类型不兼容。你应该使用Object.fromEntriesun tableau de tableaux en un tableau d'objets. Par exemple :

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  const newOne = budget?.map((item) =>
    Object.fromEntries(
      Object.entries(item).map(([key, value]) => {
        if (key === event.target.name) {
          return [key, event.target.value];
        }
        return [key, value];
      })
    )
  );
  setBudget(newOne);
};