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

Question

所以我有一个 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'));打印了这个 {"age":"20","gender":"male","goal":"recomp","height":"181","weight":" 80”}。所以我也尝试过，console.log(JSON.parse(this.state.healthData))但这会导致“跨源错误”事情是这段代码在我的 app.js 页面上运行，正如您可能在屏幕截图日志中看到的那样{age: "20", gender: "male", goal: "recomp", height: "181", weight: "80"}.那么是什么导致了这种情况，还有其他方法可以做到这一点吗？

Answer 1

每当 JSON.parse() 收到无效字符串时，React 就会抛出跨域错误，您应该能够使用以下命令重新创建它JSON.parse('')。为什么 React 允许这种情况发生，我有自己的看法，但是您需要编写一些可以 JSON.parse() 的内容，以便localStorage.getItem('user_data')您的代码正常工作。您应该看到console.log(this.state.healthData)它不是有效的 JSON 字符串。

Answer 2

我尝试这样做，效果很完美。

您必须确保状态已更改。（通过回调/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);

      }

    );

  };

Answer 3

所以我简单地通过在构造函数中设置状态而不是在组件 didMount 上设置状态来解决我的问题，但我不知道为什么当它的代码完全相同时它会起作用？

constructor(props) {

        super(props);

        this.state = {

            healthData: (JSON.parse(localStorage.getItem('user_data')))

        }

    }