Question

我有一个包含一些文本字段的表单。提交表单后，如果提交中包含错误，这些错误将显示在页面上。

代码如下。

{this.props.missingFields &&
                <div className="alert alert-danger">
                  <p className="doc-missing-fields" dangerouslySetInnerHTML={this.rawMarkup(this.props.missingFields)} />
                </div>
              }

reducer的定义如下。

case helpers.actionTypeSuccess(types.ACTION_SUBMIT_DOCUMENT):
      return {
        ...state,
        userEmployeeDocuments : action.result.data.response.userEmployeeDocuments,
        missingFields         : (action.result.data.response.missingKey) ? action.result.data.response.missingKey : '',
        validator             : {}
      };

现在的问题是，显示了错误消息，然后我移到其他页面并返回相同的表单，错误消息仍显示在此处。

再次访问表单时，我需要清除错误。

关于如何实现这一点的任何想法？

Answer 1

您必须创建一个新动作，并需要在componentWillUnmount中调用它没有动作调度，您将无法更改redux状态

case helpers.actionTypeSuccess(types.ACTION_CLEAR_SUBMITED_DOCUMENT):
      return {
        ...state,
        userEmployeeDocuments :'',
        missingFields         : '',
        validator             : {}
      };

重新访问表单时清除错误道具-React.js

1 个答案: