所以我有一個(gè) JSON 數(shù)據(jù)數(shù)組保存到本地存儲(chǔ)，如下所示localStorage.setItem('user_data', JSON.stringify(data));像這樣從本地存儲(chǔ)獲取，但 console.log(this.state.healthData) 返回 null constructor(props) { super(props); this.state = { healthData: {} } } this.setState({ healthData: JSON.parse(localStorage.getItem('user_data')) });但我知道數(shù)據(jù)可以被提取，因?yàn)?console.log(localStorage.getItem('user_data'));打印了這個(gè) {"age":"20","gender":"male","goal":"recomp","height":"181","weight":" 80”}。所以我也嘗試過，console.log(JSON.parse(this.state.healthData))但這會(huì)導(dǎo)致“跨源錯(cuò)誤”事情是這段代碼在我的 app.js 頁面上運(yùn)行，正如您可能在屏幕截圖日志中看到的那樣{age: "20", gender: "male", goal: "recomp", height: "181", weight: "80"}.那么是什么導(dǎo)致了這種情況，還有其他方法可以做到這一點(diǎn)嗎？
3 回答
慕蓋茨4494581
TA貢獻(xiàn)1850條經(jīng)驗(yàn) 獲得超11個(gè)贊
每當(dāng) JSON.parse() 收到無效字符串時(shí)，React 就會(huì)拋出跨域錯(cuò)誤，您應(yīng)該能夠使用以下命令重新創(chuàng)建它JSON.parse('')。為什么 React 允許這種情況發(fā)生，我有自己的看法，但是您需要編寫一些可以 JSON.parse() 的內(nèi)容，以便localStorage.getItem('user_data')您的代碼正常工作。您應(yīng)該看到console.log(this.state.healthData)它不是有效的 JSON 字符串。
慕仙森
TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超8個(gè)贊
我嘗試這樣做，效果很完美。
您必須確保狀態(tài)已更改。（通過回調(diào)/useEffect）
test = () => {
const data = {
age: "20",
gender: "male",
goal: "recomp",
height: "181",
weight: "80"
};
localStorage.setItem("user_data", JSON.stringify(data));
this.setState(
{
healthData: JSON.parse(localStorage.getItem("user_data"))
},
() => {
console.log(this.state.healthData);
}
);
};
小怪獸愛吃肉
TA貢獻(xiàn)1852條經(jīng)驗(yàn) 獲得超1個(gè)贊
所以我簡(jiǎn)單地通過在構(gòu)造函數(shù)中設(shè)置狀態(tài)而不是在組件 didMount 上設(shè)置狀態(tài)來解決我的問題，但我不知道為什么當(dāng)它的代碼完全相同時(shí)它會(huì)起作用？
constructor(props) {
super(props);
this.state = {
healthData: (JSON.parse(localStorage.getItem('user_data')))
}
}
- 3 回答
- 0 關(guān)注
- 203 瀏覽
添加回答
舉報(bào)
0/150
提交
取消