Question

我有一个分配给该函数的按钮，该按钮应该在单击后更新页脚属性，但它不会更改页脚文本。但是，它正在执行控制台日志语句。我感觉它与“ this”有关，但我对Google修复该问题的了解不足。

我正在尝试学习Reactjs，尤其是有关状态和超时的更多信息。\我对这里发生的事情有一个简单的JS小提琴：

页脚功能：

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

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

非常感谢您的帮助

Answer 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!"
});

Answer 2

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

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

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

希望有帮助

函数未更新属性的setState

2 个答案: