Home  >  Q&A  >  body text

How to update multiple states in Localstorage object React

So I already have a localStorage hook that retains state, but now I want to update two items in the object

This is the function to add updates

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

When it is logged, it will bring the jobExperience array like thisjobExperience: (6) ['0', '1', '2', '3', '4', '5' , {…} ]Only save one object, the rest are converted to numbers

I noticed that if I remove currentEditedJob: data.currentEditedJob 1, from the attached job object, everything works fine and the status updates fine and they are saved as objects jobExperience: (6) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]

Is there any solution

I tried updating the status one by one, but it didn't work well.

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

But it's still the same error unless I remove currentEditedJob: data.currentEditedJob 1,

P粉696605833P粉696605833421 days ago529

reply all(1)I'll reply

  • P粉872182023

    P粉8721820232023-09-15 09:04:47

    The problem seems to be with the currentEditedJob property in the addWorkExperience function. Based on the code you provided, data.currentEditedJob appears to be a string representation of a number, and when you add 1 to it, it concatenates the numbers instead of performing arithmetic addition.

    To solve this problem, you can convert data.currentEditedJob to a number and then add 1. Here is an updated version of the addWorkExperience function:

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

    By using parseInt() to convert data.currentEditedJob to a number, the addition operation will work correctly and the status will be updated as expected.

    reply
    0
  • Cancelreply