Javascript 为什么使用JSON.parse会在reactjs中导致跨源错误？

因此，我将一组JSON数据保存到本地存储中，如下所示

localStorage.setItem('user_data', JSON.stringify(data));

像这样从本地存储获取，但是console.log（this.state.healthData）返回null

  constructor(props) {
        super(props);
        this.state = {
            healthData: {}
        }
    }

 this.setState({ healthData: JSON.parse(localStorage.getItem('user_data')) });

但是我知道数据可以被提取，因为有一个

console.log（localStorage.getItem（'user_data'））打印此{“年龄”：“20”，“性别”：“男性”，“目标”：“推荐”，“身高”：“181”，“体重”：“80”}

所以我也尝试了
console.log（JSON.parse（this.state.healthData））
，但这会导致“跨源错误”

这段代码在我的app.js页面上运行，你可能会在屏幕截图日志中看到

{age: "20", gender: "male", goal: "recomp", height: "181", weight: "80"}.

那么是什么导致了这种情况，还有其他方法吗？
我试着这么做，效果非常好

您必须确保状态已更改。（通过回调/使用效果）

我试过这么做，效果很好

您必须确保状态已更改。（通过回调/使用效果）

每当JSON.parse（）接收到无效字符串时，React就会抛出一个跨源错误，例如，您应该能够使用
JSON.parse（“”）
重新创建该字符串。Why React允许这种情况发生我有自己的看法，但您需要编写一些可以将JSON.parse（）转换为
localStorage.getItem（'user_data'）
的内容，才能使代码正常工作。您应该通过
console.log（this.state.healthData）
看到它不是一个有效的JSON字符串。
React在JSON.parse（）接收到无效字符串时抛出一个跨源错误，例如，您应该能够通过
JSON.parse（“”）
重新创建它。Why React允许这种情况发生我有自己的看法，但您需要编写一些可以将JSON.parse（）转换为
localStorage.getItem（'user_data'）
的内容，才能使代码正常工作。您应该可以通过
console.log（this.state.healthData）
看到它不是一个有效的JSON字符串。
因此，我只需在构造函数中设置状态，而不是在组件didMount上设置状态，就解决了我的问题，但我不知道为什么它在代码完全相同的情况下工作

constructor(props) {
        super(props);
        this.state = {
            healthData: (JSON.parse(localStorage.getItem('user_data')))
        }
    } 

因此，我通过在构造函数中而不是在组件didMount上设置状态来修复我的问题，但我不知道当它完全相同的代码时，为什么会这样

constructor(props) {
        super(props);
        this.state = {
            healthData: (JSON.parse(localStorage.getItem('user_data')))
        }
    } 

有趣的是，我只是修复了它，但是在构造函数中获得本地存储，因此字符串是有效的，这让我想知道为什么会发生这种情况？更让我困惑的是，我之前读过它，有人提到它是chrome的一个bug，但我对此也持怀疑态度。非常感谢，很有趣，我刚刚修复了它，但是在构造函数中获得了本地存储，因此字符串是有效的，这让我想知道为什么会发生这种情况？更让我困惑的是，我之前读过它，有人提到它是chrome的一个bug，但我对此也持怀疑态度。谢谢你知道为什么构造器中的设置为我解决了这个问题我现在真的很好奇？知道为什么构造器中的设置为我解决了这个问题我现在真的很好奇吗？