Question

我将表单输入存储在React组件state中。当我提交表单时，我会触发Redux操作。当这个动作成功时，我想再次更新状态 - 清除表格......但我该怎么做？

我的意思是我也可以轻松地在Redux中存储表单状态，并且所有内容都将得到解决，但我更喜欢将组件特定的东西存储在组件状态中。

Answer 1

您应该使用类似redux-thunk之类的内容来延迟调度，直到API调用成功为止：

const postForm = data => dispatch => fetch(...).then((...) => dispatch(...))

由于fetch返回Promise，您可以等到它被解析（api调用成功），然后在组件中执行表单清除：

props.postForm(...)
  .then(() => this.setState(<clear the form state>))
  .catch(<do something to warn the user api call failed?>)

Answer 2

该动作究竟在状态上更新了什么？

一种方法是在componentWillReceiveProps中添加一个处理表单更新的额外案例。如果操作让我们更新列表，那么在组件内部的componentWillReceiveProps方法中可能会出现类似以下内容：

componentWillReceiveProps(nextProps) {
  if (nextProps.list !== this.props.list) {
    this.setState({
      formFields: this.getNewClearFormFields()
    })
  }
}

其中getNewClearFormFields是一个返回新表单字段的函数

Answer 3

如果您想在state成功后更新redux action，那么我建议您继续比较componentWillReceiveProps和prevState并将其放入nextState

使用mapStateToProps()将redux state映射到component 然后更新组件状态，如下所示

 componentWillReceiveProps(nextProps) {
    this.setState({
      ...
    });
  }

在redux操作成功后清除表单

3 个答案: