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

大概派遣该动作是在更新商店，这是在更新道具，这再次触发componentDidUpdate。解决此问题的通常方法是使用一些条件，该条件最终会阻止操作再次分派，这看起来就像您要尝试执行的操作，但是该条件始终会评估为true。不知道该条件的确定部分意味着什么，我想问题可能出在以下方面：

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

只要sockOpen是真实的，调度将运行，并且您将循环运行。只要sockOpen的值与先前的更新不同，它也会循环播放。因此，即使sockOpen是错误的，如果sockOpen上次是真实的，它仍然会循环。这意味着，如果sockOpen永远是真实的，则循环将变为无限，因为即使偶然发生使sockOpen成为错误的，在最后一个循环中它也是真实的，并且该or子句的第一部分为true。

您需要弄清楚不应该发生分派的条件是什么，设置条件的条件以使其匹配这些条件，最重要的是确保该条件可能发生！

Answer 2

您的逻辑是错误的。在(sockOpen !== prevProps.sockOpen || sockOpen)中，一旦sockOpen为真，它将始终运行pollStartAction()逻辑。如果您希望它在变为true时运行一次，那么就需要改为&& sockOpen。

在React componentDidUpdate中调度Redux动作

2 个答案: