返回任何值之前的 setState答案

【问题标题】：setState before returning any value返回任何值之前的 setState
【发布时间】：2019-02-20 20:44:26
【问题描述】：

所以，我有一个名为“method”的组件状态的属性，该属性设置为空字符串（“”），还有一个名为 selectMethod ==>

的函数

  selectMethod = (e) => {
      const x = e.target.getAttribute("return-data");  
      this.setState({method: x});  
      console.log(this.state.method);
  }

当我点击一个按钮时触发

<button onClick={this.selectMethod} return-data="test">SELECT</button>

我希望在控制台中显示的是“测试”。但是当我单击按钮时，只显示空字符串，然后当我再次单击按钮时，显示“测试”字样。我想要做的是让属性方法设置为“测试”之前得到控制台，并让测试从第一次点击就显示在控制台上。我不知道它为什么这样做。我的意思是“方法”应该在得到安慰之前设置为“测试”。

【问题讨论】：

从@RoseRobertson 的回答中可以看出，您可以在setState 方法中使用回调。但是，有一种更简单的方法，至少对我来说是这样的：) 在 render 方法中记录您的状态。
我还是 React 的初学者，所以我不确定我是否明白你的意思。可以举个例子吗？
这里只是console.log(x) - console.log(this.state.method) 在render 中是有意义的，这是由状态变化所强制的

标签： reactjs ecmascript-6 react-props

【解决方案1】：

setState 不会立即发生，所以你不能依赖它作为同一个运行循环中的新值。但是，它确实将回调作为第二个参数，您可以在必要时使用它。为你找到了一篇关于这个的简短的中等帖子 - https://medium.learnreact.com/setstate-takes-a-callback-1f71ad5d2296

例子：

this.setState({method: x}, function () { console.log(this.state.method); })

【讨论】：

虽然这个问题与许多以前的问题重复，因为您提供了答案，但我认为提供示例代码而不是此处的链接会更好:)
@devserkan 谢谢，我添加了一个例子 :) 诚然，我不擅长 stackoverflow 重复回答礼仪，这不是我的第一次冒犯 ?（虽然可能是我第一次被要求它?）
大声笑，没问题。我们看到很多关于这个的问题，这就是为什么我知道有这么多重复。通常，我们在这里发起close 投票请求，但由于有答案，我建议了一个代码示例。此外，OP 要求另一个答案，然后我提供了一个。所以，我也是一个有罪的人：）另外，赞成更新。

【解决方案2】：

正如所解释的，由于setState 是异步的，您的即时console.log 调用无法赶上更新。您有两种选择：

使用setState 方法的回调。
在render 方法中记录您的状态。

class App extends React.Component {
  state = {
    name: ""
  };

  updateName = () =>
    this.setState({ name: "foo" }, () => console.log(this.state.name));

  render() {
    console.log(this.state.name);
    return <button onClick={this.updateName}>Update name</button>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

如您所见，我们在这里登录了两个地方。一个带有回调，一个在render 方法中。由于第一次渲染中没有任何名称，因此您首先会在此处看到 ""。状态更新后，您会看到该值。

【讨论】：

我认为回调方法更有意义。我在这里要做的是让“foo”在第一次点击后只显示一次。我根本不需要返回空字符串，对吧？
如果您的意图只是记录它，那么没有区别。空字符串只是来自第一次渲染。看到它没有伤害或没有好处。
另外，我喜欢在render 方法中记录状态，所以我可以看到相关的状态属性或状态是如何变化的。新的在旧的之后，这是一种比较，当然只是为了记录目的。