Redux,同步动作后回调

Question

我试图弄清楚如何在调用同步动作后正确实现回调,并且相关的反应组件已经更新.我正在尝试做的事情可以与滚动比较,并聚焦新创建的待办事项.

我目前在做什么:

// in Entries Component
createEntry() {
  this.props.actions.createNewEntry(key);

  setTimeout(() => {
    // accessing updated DOM
    this.scrollToAndFocus(key);
  });
}

它有效,但感觉非常脆弱和hackish.肯定有更好的办法？

Answer 1

正如评论中所回答的那样,组件生命周期中的右钩子是componentDidUpdate.来自文档:

在将组件的更新刷新到DOM后立即调用.初始渲染不会调用此方法.

因此,您的组件变为:

createEntry() {
    this.props.actions.createNewEntry(key);
}

componentDidUpdate() {
    this.scrollToAndFocus(key);
}

请注意,如果您进一步修改DOM componentDidUpdate,那么您应该实现一个停止条件,否则您将陷入无限循环.这可以做到

• shouldComponentUpdate如果停止条件取决于props或的当前和未来值,则通过重写state.
• in componentDidUpdate,如果它依赖于某些DOM属性,例如,document.activeElement