Question

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

我目前正在做的事情：

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

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

它有效，但感觉非常脆弱和hackish。必须有更好的方法吗？

Answer 1

正如评论中所回答的，组件生命周期中的右钩子是componentDidUpdate。来自docs：

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

因此，您的组件变为：

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

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

请注意，如果您在componentDidUpdate中进一步修改DOM，那么您应该实现停止条件，否则您将无限循环。这可以做到

通过覆盖shouldComponentUpdate，如果停止条件取决于props或state的当前和未来值。
在componentDidUpdate中，如果它取决于某些DOM属性，例如document.activeElement

Redux，同步动作后回调

1 个答案: