Cara mengemas kini berbilang keadaan dalam objek Localstorage React

Question

Jadi saya sudah mempunyai cangkuk localStorage yang mengekalkan keadaan, tetapi sekarang saya ingin mengemas kini dua item dalam objek

Ini adalah fungsi untuk menambah kemas kini

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

Apabila ia dilog, ia akan membawa tatasusunan jobExperience seperti ini jobExperience: (6) ['0', '1', '2', '3', '4', '5', {…} ]Hanya satu objek disimpan, selebihnya ditukar kepada nombor

Saya perasan bahawa jika saya mengeluarkan currentEditedJob: data.currentEditedJob + 1, ，一切都会正常工作，并且状态更新良好，并且它们会保存为对象 jobExperience: (6 ) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]

daripada objek kerja yang dilampirkan

Ada penyelesaian

Saya cuba mengemas kini status satu demi satu, tetapi ia tidak berfungsi dengan baik.

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

Tetapi melainkan saya keluarkan currentEditedJob: data.currentEditedJob + 1， ia masih ralat yang sama

Answer 1

Masalahnya nampaknya adalah dengan harta EditedJob semasa dalam fungsi addWorkExperience. Berdasarkan kod yang anda berikan, data.currentEditedJob nampaknya merupakan perwakilan rentetan bagi nombor dan apabila anda menambah 1 padanya, ia menggabungkan nombor dan bukannya melakukan penambahan aritmetik.

Untuk membetulkannya, anda boleh menukar data.currentEditedJob kepada nombor dan kemudian tambah 1. Berikut ialah versi terkini fungsi 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);
};

Dengan menggunakan parseInt() untuk menukar data.currentEditedJob kepada nombor, operasi penambahan akan berfungsi dengan betul dan status akan dikemas kini seperti yang diharapkan.