Javascript 从redux操作重置表单状态

我目前有以下组件，为了简单起见，我在codesandbox上创建了一个最小的示例。这说明了我的问题

对于stackoverflow，以下是一些代码片段：

class CommentForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      comment: ""
    };

    this.handleCommentChange = this.handleCommentChange.bind(this);
    this.handleFormSubmit = this.handleFormSubmit.bind(this);
  }

  handleCommentChange(evt) {
    this.setState({ comment: evt.target.value });
  }

  handleFormSubmit(evt) {
    evt.preventDefault();
    this.props.addComment(this.state.comment);
  }
  render() {
    const { submitting } = this.props;

    return (
      <form onSubmit={this.handleFormSubmit}>
          <textarea
            name="comment"
            placeholder="Write your comment here..."
            rows="5"
            value={this.state.comments}
            onChange={this.handleCommentChange}
          />
          <br />
          <input
            type="submit"
            disabled={submitting}
            value="COMMENT"
          />
      </form>
    );
  }
}

类CommentForm扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
评论：“”
};
this.handleCommentChange=this.handleCommentChange.bind（this）；
this.handleFormSubmit=this.handleFormSubmit.bind（this）；
}
handleCommentChange（evt）{
this.setState（{comment:evt.target.value}）；
}
handleFormSubmit（evt）{
evt.preventDefault（）；
this.props.addComment（this.state.comment）；
}
render（）{
const{submitting}=this.props；
返回(


);
}
}

我的问题是：当我的saga分派动作

COMMENT\u ADD\u SUCCESS

时，如何重置表单状态（

this.state.comments=''

我想避免的是：在redux状态中添加注释。我知道我可以将注释移动到redux存储中，并在reducer本身中返回类似

{…state，commentField:'}

---

这个表单对于演示来说很简单，但是我有一个更复杂的表单，我觉得它不需要添加到redux存储中，因为它的状态是短期的，一旦组件死亡，状态就可以简单地丢弃。此外，如果我需要向应用商店添加注释，我需要创建类似于更新redux应用商店的

comment\u UPDATED

之类的操作，这可能是一个相当大的麻烦，尤其是对于具有大量字段的表单。

您可以这样做吗

  handleFormSubmit(evt) {
    evt.preventDefault();
    this.props.addComment(this.state.comment);
    this.setState({ comments: ''});
  }

要扩展@Lefi所说的内容：

您可以添加回调并在saga.js中调用它

callback = () => {
  this.setState({ comments : '' })
}

handleFormSubmit(comment, callback) {
  ...
}

---

由于您提供了

提交

道具，下面的代码应该可以使用。您要做的是捕获从true到false的转换

componentDidUpdate（prevProps）{
if（prevProps.submiting==this.props.submitting）{
//我们提交评论的状态没有改变，所以不要做任何事情。
返回；
}
如果（！this.props.submitting）{
//评论刚刚提交完毕，因为我们
//我们从对到错
this.setState（{注释：'}）；
}
}

我通常将回调作为额外参数传递给操作，并从saga调用回调。因此，我将更改您的

CommentForm

代码，以分派传递具有文本值和回调函数的对象的操作：

handleFormSubmit(evt) {
    evt.preventDefault();
    this.props.addComment({ comment: this.state.comment, callback: function() {
      alert("callback invoked");
      // here do cleanup of state as you wish
    }});
  }

并将saga更改为在成功时调用回调：

function* addComment(params) {
  console.log("Adding Comment");

  yield put({ type: "ADD_COMMENT_FETCHING" });

  // Simulate call success
  yield call(delay, 5000);

  alert("(From saga) The comment was added successfully.");
  yield put({ type: "ADD_COMMENT_SUCCESS" });

  params.action.callback(); // <--- here the callback
}

函数*addComment（参数）{
console.log（“添加注释”）；
产生put（{type:“ADD_COMMENT_FETCHING”}）；
//模拟呼叫成功
收益呼叫（延迟，5000）；
警报（（（来自saga）注释已成功添加。“）；
收益put（{type:“ADD_COMMENT_SUCCESS”}）；
params.action.callback（）；//是否不想将
this.setState（{comment:'}）
添加到
handleFormSubmit
？为什么不将回调传递给addComment操作：
this.props.addComment（this.state.comment，callback）
该回调是CommentForm中重置注释状态的成员的位置？当添加成功时。这会立即重置表单，而不是在服务器返回响应时。如果有错误，我不想重置表单。很好！甚至没有考虑添加回调。Eslint对我大喊大叫，我应该避免
setState（）
在
componentdiddupdate（）
：（但这是一件很容易知道的事情，定义是另一种方式！）