我刚刚开始学习React和JavaScript。
在阅读本教程的过程中,我转到了该组件的示例代码,该示例创建了一个切换按钮。
这是代码的一部分:

class Toggle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {isToggleOn: true};
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState(prevState => ({    // prevState?
            isToggleOn: !prevState.isToggleOn
        }));
    }

有两件事困扰我:
  • prevState参数从何而来?
    在调用它之前,我看不到var prevState = this.state;之类的东西,但它仍然有效。
  • 箭头函数的语法:为什么在箭头后面加上括号?
    为什么通常的arg => { statement; }语法在这里不起作用?

  • 对不起,新手问题...

    最佳答案

  • prevStateprops一起由React提供,两者都是可选的。
  • 更新04/13/19 :React通过将prevState重命名为updater来更改setState函数文档。回调函数仍然需要两个参数。应用更改时的stateprops
  • 括号允许多行,如果您不使用括号,则将被迫使用return。您可以使用一行,但不需要花括号。
  • 更新:我忘了提及需要带有括号的特定情况。如果要返回的对象没有return语句,则必须将其包装在括号中。谢谢@joedotnot捕获了它。因此() => {foo: true}会引发错误,因为它看起来像一个函数,而foo: true是无效行。要解决这个问题,它必须看起来像() => ({ foo: true })
  • 09-18 18:37