异步功能后强制 React 组件更新？

Question

我的反应组件中有以下代码：

onSubmit(e) {
      e.preventDefault();
      this.props.doSomething();

      this.setState({
          inputField: this.props.myReducer.someValue
      });
  }

因此，每当有人按下 'Submit' 按钮时，都会执行某些功能，然后我的输入字段的状态会更新为 'myReducer' 中更改的相应值。

但是，有一个问题。 'doFunction' 是一个异步操作，这意味着之后直接设置状态不会导致更新，因为状态在之后立即设置时还没有被函数更改。

我将如何处理 react/redux 中的此类事件？

Answer 1

这与doSomething()的性质有关。您应该始终收到函数已完成的通知。 99% 的时间，something 是一个 Ajax 调用，在大多数库中，return 是一个承诺：

 this.props.doSomething()
   .then(() => 
          this.setState({
            inputField: this.props.myReducer.someValue
          });

如果 doSomething() 没有 return 承诺，您可能应该对其进行编辑或扩充，使其成为 return 承诺。如果需要回调，你可以这样做：

 new Promise(this.props.doSomething)
   .then(() => 
          this.setState({
            inputField: this.props.myReducer.someValue
          });

异步功能后强制 React 组件更新？

Force React component update after async function?

javascript

asynchronous

reactjs

redux

react-redux