javascript - 在 React componentDidUpdate 中调度 redux 操作

Question

我试图在 componentDidUpdate 生命周期方法中调度 redux 操作，但是它会导致无限循环，导致应用程序崩溃。这是我目前拥有的代码:

   componentDidUpdate(prevProps, prevState) {
    const { dispatch, sockOpen, user } = this.props;
    if (
      navigator.onLine &&
      user &&
      (sockOpen !== prevProps.sockOpen || sockOpen)
    ) {
      dispatch(pollStartAction());
      this._checkSessionIntervalId = setInterval(
        this.checkActiveSessions,
        5000
      );
    }
  }

这是执行此操作的正确方法吗？还是有更好的编写方法，不会导致无限渲染循环。谢谢。

Answer 1

大概分派(dispatch)该操作正在更新存储，这正在更新 Prop ，这会再次触发 componentDidUpdate。解决这个问题的通常方法是使用一些条件，最终阻止操作再次分派(dispatch)，这看起来像是您正在尝试做的，但该条件始终评估为 true。如果不确定该条件的各个部分的含义，我猜问题出在:

(sockOpen !== prevProps.sockOpen || sockOpen)

只要 sockOpen 为真，调度就会运行并且您将循环。每当sockOpen的值与之前更新的不同时，它也会循环。因此，即使 sockOpen 为 false，如果上次 sockOpen 为 true，它仍然会循环。这意味着如果 sockOpen 永远为真，则循环将变得无限，因为即使发生某些事情使 sockOpen 为假，它在最后一个循环中也为真，并且该 or 子句的第一部分为真。

您需要弄清楚不应该发生调度的条件，设置条件条款以匹配这些条件，最重要的是确保这组条件有可能发生!