来自函数的 setState 不更新属性答案

【问题标题】：setState from function not updating property来自函数的 setState 不更新属性
【发布时间】：2019-10-13 18:51:42
【问题描述】：

我有一个按钮分配给一个功能，该功能应该在单击后更新页脚属性，但它不会更改页脚文本。然而，它正在执行控制台日志语句。我有一种感觉，它与“this”有关，但我不知道谷歌要解决什么问题。

我正在尝试学习 Reactjs，特别是关于状态和超时的更多信息。\ 我有一个简单的 JS 小提琴：

页脚功能：

  updateFooter = () => {
    //alert("clicked");
    this.setState = {
      footer: "new footer text from button!"
    }
    console.log("updateFooter func fired.")
    console.log(this.state)
  }

编辑：不要在函数中分配你的状态：/

非常感谢任何帮助

【问题讨论】：

reactjs.org/docs/state-and-lifecycle.html#using-state-correctly 需要调用setState，不要分配给它
这不是 this.setState({footer: "new footer text"}) 吗？

标签： reactjs

【解决方案1】：

setState 是一个函数。你需要这样称呼它：

this.setState ({
   footer: "new footer text from button!"
});

来自 React 文档：

您可以使用以下命令独立更新 [您所在州的不同元素] 单独的 setState() 调用。

您不会将setState 的结果分配给任何东西，您只需调用它，因为它是您类中的 React 方法。

代替

this.setState = ({
  footer: "new footer text from button!"
});

您只需调用它并让 React 为您管理它：

this.setState ({
  footer: "new footer text from button!"
});

【讨论】：

【解决方案2】：

您需要使用setState()。此外，如果您想在运行setState() 后立即记录更新的状态，setState() 采用可选的第二个回调参数。使用回调可确保您获得最新版本的状态。如果您只是在下一行记录状态，则不会看到更新的更改。

this.setState({ footer: "new footer text from button!" }, () => { console.log(this.state) })

在此处阅读更多信息：https://reactjs.org/docs/react-component.html#setstate

希望对你有帮助

【讨论】：