React：“PrevState”和“=>”的代码解释[重复]

Posted 2023-02-21

【中文标题】React：“PrevState”和“=>”的代码解释[重复]

【英文标题】：React: Code Explanation for "PrevState" and "=>" [duplicate]

【发布时间】：2020-08-20 05:39:59

【问题描述】：

我刚开始做出反应并尝试理解更好的 java 脚本代码。

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

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

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

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

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

【问题讨论】：

我不确定您要的是什么信息。你想知道arrow functions 的语法吗？

en.reactjs.org/docs/hooks-reference.html#functional-updates

【参考方案1】：

setState 在 react 中是一个异步过程，因此当您的新状态依赖于先前状态的值时，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