Question

在我的应用程序中，我正在使用操作来进行所有的ajax调用。当结果返回时，它将它们分派到reducer，然后将其放入存储中。我的组件已绑定到该属性，然后便可以从商店中获取它。

但是，我在尝试找出提交表单的最佳方法时遇到了问题。在列表页面中，用户可以单击任意行上的链接以打开模式。该模态具有形式。填写表单后，它将把数据传递给一个动作，动作将提交它。有效提交的唯一响应是HTTP 200。

在不使用回调的情况下，模式将如何知道ajax调用已完成，因此可以自行关闭？到目前为止，我在商店中有一个名为form.processing的标志。默认情况下为false，操作将在开始时将其设置为true，在完成时将其设置为false。该组件监视此事件，然后知道它何时从true变为false，并且知道一切已完成。但是，我觉得应该有更好的方法。

或者即使我们不对其他任何ajax调用都遵循该过程，还是应该在表单中使用回调？

Answer 1

以下伪代码可以帮助您：

 constructor () {
     this.state = {
         disaplyModalPopup: false;
     }
 }

 handleSubmit = () => {
    this.setState({disaplyModalPopup: true})
    let payLoad = { 'Key':this.state.something }
    this.props.hitAPI(payLoad).then((res) => {
      if (res.data.success) {
        this.setState({
            'disaplyModalPopup': false
        })
      }else{
          this.setState({
            'disaplyModalPopup': true,
            'errorMessage': 'something wend wrong'
        })
      }
    })
 }

 rendor (){
     let errorMessage = {this.state.errorMessage}
     let disaplyModalPopup = {this.state.disaplyModalPopup}
     return (
         {disaplyModalPopup ? <modal> </modal> : ''}
         { errorMessage? 'errorMessage': ''}
     )
 }

在这里，我已经以 disaplyModalPopup 状态处理了您的modalPopup。并获取保存在化简器中的响应后，将其更改为 {disaplyModalPopup：false} 而且modalPopUp HTML将消失。

但如果您的API在做出响应时出现失败的情况，所以这种情况：我有句柄作为错误消息作为文本 errorMessage ，您可以在其中显示错误消息。这样Modal并排关闭。

React / Redux表单提交

1 个答案: