javascript - react : Code Explanation for "PrevState" and "=>"

Question

这个问题已经有答案了:

When to use functional setState (3 个回答)

When to use React setState callback (6 个回答)

What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript? (14 个回答)

已关闭 3 年前。

我对 React 很陌生，并尝试理解更好的 Java 脚本代码。

我使用下面的代码并且它有效:基本上，该函数采用“描述”的先前状态，并在用户输入内容时使用新值更新“描述”。

但是，我不太明白代码中是如何完成的，我希望得到解释(特别是关于“=>”和“PrevState”以及两者的相互作用)。

onChangeDescription(e) {
    const description = e.target.value;

    this.setState(prevState => ({
      currentTutorial: {
        ...prevState.currentTutorial,
        description: description
      }
    }));
  }

我还想用 () => console.log(this.state)) 记录用户输入但我没有找到正确的“位置”将其插入到上面的函数中。

Answer 1

React 中的

setState 是一个异步过程，因此当您的新状态依赖于先前状态的值时，React 建议使用此 callback 格式，您可以在其中获得状态中的最后一个现值。

关于控制台，请使用下面

    this.setState(prevState => ({
      currentTutorial: {
        ...prevState.currentTutorial,
        description: description
      }
    }), () => console.log(this.state)));

在这里阅读更多相关信息 https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous