react 函数中的 setState 未在 promise 方法中更新

Question

我正在使用 reactjs 并且非常了解它，例如基础知识。但是，我一直在研究这种奇怪的行为，但一直未能找到罪魁祸首。也许你们中的一个反应精英有一个想法哈哈。所以我正在使用具有以下状态对象的有状态组件

this.state = {
  buttonVisible: false,
};

因此，为了显示按钮并更改状态，我承诺这样做

handleSubmit = async (e) => {

const { status } = this.props;

     e.preventDefault();


     await verifyForm().then((data) => {
       const submissionSuccess = status === 'SUCCESSFUL_SUBMISSION';
       this.setState({
         buttonVisible: submissionSuccess
       });
       actions.showNotification(data);
     }).catch(err => actions.showNotification(err));
   };

在渲染方法中：

这是具有应将 buttonVisible 状态设置为 true 的 onClick 处理程序的按钮。

           <Button
              fullWidth
              onClick={this.handleSubmit}
              type="submit"
              variant="contained"
              color="primary">Submit 
            </Button>

在我使用 onClick 处理程序单击按钮后，如果 this.state.buttonVisible 为真，它应该呈现以下按钮。

{ this.state.buttonVisible &&
                  <Button
                    onClick={this.handleShowModal}
                    variant="contained"
                    color="primary">
                    Proceed
                  </Button>
                }

但它没有渲染按钮。所以我控制台记录了 this.state.buttonVisible 信息，它仍然是错误的。

我知道该方法没有返回任何错误，因为我可以看到表单在我这边已成功验证，而且，它不会进入 catch 块，而是进入 .then 块。我认为这与 handleSubmit 处理程序有关。但不确定它是什么。任何帮助表示赞赏。谢谢！

Answer 1

await returns 解析了 Promise 的值，而不是可以附加 then 的 Promise。您可以修改您的代码：

    ...
   try{
       const data = await verifyForm();
       const submissionSuccess = status === 'SUCCESSFUL_SUBMISSION';
       this.setState({
             buttonVisible: submissionSuccess
           });
       actions.showNotification(data);

    }catch(err){
     actions.showNotification(err)
   }

react 函数中的 setState 未在 promise 方法中更新

setState in react function not updating in promise method

javascript

asynchronous

async-await

ecmascript-6

reactjs