localStorage getItem()方法没有检索数据

Question

我正试图从浏览器本地存储中获取项目，但无法，请帮助我。但是我不能从localStorage中检索存储的数据。我的Web开发工具告诉我存储的数据存在，但是当我打开或重新加载页面时，我不会得到数据。

const LOCAL_STORAGE_KEY = "contacts";
const App = () => {
const [contacts, setContacts] = useState([]);
const addContactHandler = (contact) => {
console.log(contact);
setContacts([...contacts, contact]);
};

useEffect(() => {
const retrieveContacts = JSON.parse(
localStorage.getItem(LOCAL_STORAGE_KEY)
);
if (retrieveContacts) {
setContacts(retrieveContacts);
}
}, []);

useEffect(() => {
localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts));
}, [contacts]);
return (
<>
<div className="app">
<Header />
<AddContact addContactHandler={addContactHandler} />
<ContactList contacts={contacts} />
</div>
</>
);
};

我检查了参考文献。但它仍然不工作。

Answer 1

所有的useEffects在渲染时只运行一次。所以最初你的联系人状态是[]，你将它存储到localStorage。

所以要解决这个问题，尝试在存储到localStorage时添加简单的if检查。

请参阅代码注释以获得更多解释。

const LOCAL_STORAGE_KEY = "contacts";
const App = () => {
const [contacts, setContacts] = useState([]);
const addContactHandler = (contact) => {
console.log(contact);
setContacts([...contacts, contact]);
};

useEffect(() => {
const retrieveContacts = JSON.parse(
localStorage.getItem(LOCAL_STORAGE_KEY)
);
if (retrieveContacts) {
setContacts(retrieveContacts);
}
}, []);

useEffect(() => {
if(contacts.length) { // Only store if contacts is not empty
localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts));
}
}, [contacts]);
return (
<>
<div className="app">
<Header />
<AddContact addContactHandler={addContactHandler} />
<ContactList contacts={contacts} />
</div>
</>
);
};

Answer 2

如前所述

useEffect(() => {
localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts));
}, [contacts]);

当组件挂载时，此效果将被调用，并且由于useState的默认值中声明的时间点状态始终是空数组([])，因此将本地存储设置为空数组([])。

这发生在应用程序在<StrictMode>中运行时，这是一件好事。在StrictMode下，react会运行两次useEffects，以确保没有不安全的生命周期。

所以渲染和shouldComponentUpdate"方法运行两次。这就是问题所在

确保不要禁用严格模式，而是修复生命周期。

Answer 3

为什么不工作?

您的第一个useEffect工作正常

useEffect(() => {
const retrieveContacts = JSON.parse(
localStorage.getItem(LOCAL_STORAGE_KEY)
);
if (retrieveContacts) {
setContacts(retrieveContacts);
}
}, []);

但是这个setContacts(retrieveContacts)在第二个useEffect运行之前不会改变状态，所以下面的contacts是[]

useEffect(() => {
localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts));
}, [contacts]);

如何使其工作?

你可以检查contacts是否为空，但它会在删除项目时导致错误

您可以在每次更改联系人时更新存储:

const LOCAL_STORAGE_KEY = "contacts";
const App = () => {
const [contacts, setContacts] = useState([]);
const addContactHandler = (contact) => {
const newContacts = [...contacts, contact];
setContacts(newContacts);
updateStorage(newContacts);
};
useEffect(() => {
const retrieveContacts = JSON.parse(
localStorage.getItem(LOCAL_STORAGE_KEY)
);
if (retrieveContacts) {
setContacts(retrieveContacts);
}
}, []);
const updateStorage = (items) => {
localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(items));
};
return (
<>
<div className="app">
<Header />
<AddContact addContactHandler={addContactHandler} />
<ContactList contacts={contacts} />
</div>
</>
);
};

或者在状态初始化器中加载存储:

const LOCAL_STORAGE_KEY = "contacts";
const App = () => {
const [contacts, setContacts] = useState(() => {
const retrieveContacts = JSON.parse(
localStorage.getItem(LOCAL_STORAGE_KEY)
);
if (retrieveContacts) {
return retrieveContacts;
}
return [];
});
useEffect(() => {
localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts));
}, [contacts]);
const addContactHandler = (contact) => {
const newContacts = [...contacts, contact];
setContacts(newContacts);
updateStorage(newContacts);
};
return (
<>
<div className="app">
<Header />
<AddContact addContactHandler={addContactHandler} />
<ContactList contacts={contacts} />
</div>
</>
);
};

或者两种方法结合