So aktualisieren Sie mehrere Zustände im Localstorage-Objekt React
P粉696605833
P粉696605833 2023-09-14 11:49:00
0
1
454

Ich habe also bereits einen localStorage-Hook, der den Status beibehält, aber jetzt möchte ich zwei Elemente im Objekt aktualisieren

Dies ist die Funktion zum Hinzufügen von 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));

Wenn es protokolliert wird, wird ein jobExperience-Array wie dieses angezeigt:jobExperience: (6) ['0', '1', '2', '3', '4', '5', {…} ]Nur ein Objekt wird gespeichert, der Rest wird in Zahlen umgewandelt

Das ist mir aufgefallen, wenn ichcurrentEditedJob: data.currentEditedJob + 1,,一切都会正常工作,并且状态更新良好,并且它们会保存为对象jobExperience: (6 ) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]

aus dem angehängten Jobobjekt entferne

Gibt es eine Lösung

Ich habe versucht, den Status einzeln zu aktualisieren, aber es hat nicht gut funktioniert.

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

Aber wenn ich es nicht entfernecurrentEditedJob: data.currentEditedJob + 1,, ist es immer noch derselbe Fehler

P粉696605833
P粉696605833

Antworte allen (1)
P粉872182023

问题似乎出在 addWorkExperience 函数中的 currentEditedJob 属性上。根据您提供的代码,data.currentEditedJob 似乎是数字的字符串表示形式,当您向其添加 1 时,它会连接数字而不是执行算术加法。

要解决此问题,您可以将 data.currentEditedJob 转换为数字,然后再加 1。以下是 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); };

通过使用 parseInt() 将 data.currentEditedJob 转换为数字,加法操作将正常工作,并且状态将按预期更新。

    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage
    Über uns Haftungsausschluss Sitemap
    Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!