this.state 值未从控制台更新[重复]答案

【问题标题】：this.state value not updating from console [duplicate]this.state 值未从控制台更新[重复]
【发布时间】：2020-05-21 08:06:22
【问题描述】：

我刚刚尝试从 React 中的浏览器控制台为 this.state 添加值。

我尝试了两种方式，

首先：使用此代码$r.state.list[0].a = 2。

第二个：使用了 react 开发者扩展并从组件中改变了它。

这是我正在使用的代码：

this.state = {
  list: [
    { a: 5 },
    { b: 6 },
    { c: 1 },
  ],
};

UI 正在根据状态值工作。如果我更改值，它将在 UI 中更新。

我想从控制台更改值并根据该值检查 UI 是否正在更改。如果我硬编码，它将起作用。

【问题讨论】：

【解决方案1】：

你应该使用 setState 函数而不是直接改变状态你应该这样做：

this.setState({newVal: 5});

而不是 this.state = {newVal: 5};

之所以必须使用 setState 而不是直接更改它，主要是因为 setState 会导致重新渲染（如果需要），而直接在 state 对象上更改则不会。

另外，注意 this.setState 是异步的！！这样，如果在下一行打印，您可能看不到状态的变化

你可以在渲染函数中打印状态，也可以使用 setState 的回调 ->

this.setState({newVal: 5}, (newState) => console.log(newState));

【讨论】：