Question

因此，我在名为“ 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>

我希望在控制台中显示的是“测试”。但是当我单击按钮时，仅显示空字符串，然后再单击一次按钮，则显示“测试”字词。我想做的是先对属性方法设置为“ test”，然后进行控制台操作，并使测试从第一次单击开始显示在控制台上。我不知道为什么要这么做。我的意思是说，在获得控制之前，应将“方法”设置为“测试”。

Answer 1

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

示例：

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

Answer 2

如前所述，由于addViewer()是异步的，因此您的即时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。状态更新后，您会看到该值。

返回任何值之前的setState

2 个答案: