Comment mettre à jour plusieurs états dans l'objet Localstorage React

Question

J'ai donc déjà un hook localStorage qui conserve l'état, mais maintenant je souhaite mettre à jour deux éléments dans l'objet

C'est la fonction pour ajouter des mises à jour

const { data, setData } = useLocalStorage();

  const addWorkExperience = () => {
    let additionJob = {
      ...data,
      jobExperience: [
        ...data.jobExperience,
        {
          city: "",
          company: "",
          country: "",
          current: false,
          endMonth: "",
          endYear: "",
          jobTitle: "",
          startMonth: "",
          startYear: "",
          state: "",
          workDesc: "",
        },
      ],
      currentEditedJob: data.currentEditedJob + 1,
    };

    setData(additionJob, console.log(additionJob, data));

Lorsqu'il est enregistré, il apportera un tableau jobExperience comme celui-ci jobExperience: (6) ['0', '1', '2', '3', '4', '5', {…} ]Un seul objet est enregistré, le reste est converti en nombres

J'ai remarqué que si je supprimais currentEditedJob: data.currentEditedJob + 1, ，一切都会正常工作，并且状态更新良好，并且它们会保存为对象 jobExperience: (6 ) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]

de l'objet de travail ci-joint

Y a-t-il une solution

J'ai essayé de mettre à jour le statut un par un, mais cela n'a pas bien fonctionné.

setTemplateData((prev) => ({...prev,
        jobExperience: [
           ...prev.jobExperience,
           {
             city: "",
             company: "",
             country: "",
             current: false,
             endMonth: "",
             endYear: "",
             jobTitle: "",
             startMonth: "",
             startYear: "",
             state: "",
             workDesc: "",
          },
        ],
       currentEditedJob: data.currentEditedJob + 1,
     }), console.log(additionJob, data));

Mais à moins que je supprime currentEditedJob: data.currentEditedJob + 1， c'est toujours la même erreur

Answer 1

Le problème semble provenir de la propriété currentEditedJob dans la fonction addWorkExperience. D'après le code que vous avez fourni, data.currentEditedJob semble être une représentation sous forme de chaîne d'un nombre et lorsque vous y ajoutez 1, il concatène les nombres au lieu d'effectuer une addition arithmétique.

Pour résoudre ce problème, vous pouvez convertir data.currentEditedJob en nombre, puis ajouter 1. Voici une version mise à jour de la fonction addWorkExperience :

const currentEditedJob = parseInt(data.currentEditedJob, 10); // Convert to number
  const additionJob = {
    ...data,
    jobExperience: [
      ...data.jobExperience,
      {
        city: "",
        company: "",
        country: "",
        current: false,
        endMonth: "",
        endYear: "",
        jobTitle: "",
        startMonth: "",
        startYear: "",
        state: "",
        workDesc: "",
      },
    ],
    currentEditedJob: currentEditedJob + 1, // Perform arithmetic addition
  };

  setData(additionJob);
  console.log(additionJob, data);
};

En utilisant parseInt() pour convertir data.currentEditedJob en nombre, l'opération d'addition fonctionnera correctement et le statut sera mis à jour comme prévu.