问componentDidUpdate....why内部出现无限循环错误？
EN

Stack Overflow用户

提问于 2020-02-28 15:43:19

回答 2查看 43关注 0票数 0

我收到这个错误:错误:超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量，以防止无限循环。

为什么？我将setState封装在一个if语句中，以防止它导致无限循环，但显然情况并非如此。为了解决这个错误，你有什么建议吗？

componentDidUpdate(prevProps: any, prevState: any) {
    if (this.props.submissions !== prevState.submissions) {
        let uniqueOrganizations: any = [];
        let uniqueWindows: any = [];
        if (this.props.submissions !== null) {
            this.props.submissions.filter((submission: any, index: number) => {
                !uniqueOrganizations.some((o: any) => o.organizationId === submission.user.organization.organizationId) && uniqueOrganizations.push(submission.user.organization);
                !uniqueWindows.some((w: any) => w.windowId === submission.window.windowId) && uniqueWindows.push(submission.window);
            });
            this.setState({
                uniqueOrganizations: uniqueOrganizations,
                uniqueWindows: uniqueWindows
            });
        }
    }
}

reactjs

typescript

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-02-28 16:00:19

您的if语句实际上并没有将前面的道具与实际的道具进行比较。您正在将先前的道具与先前的状态进行比较。请参阅文档here

你可以试试这个。

componentDidUpdate(prevProps: any, prevState: any) {
    if (this.props.submissions !== prevProps.submissions) {
        let uniqueOrganizations: any = [];
        let uniqueWindows: any = [];
        if (this.props.submissions !== null) {
            this.props.submissions.filter((submission: any, index: number) => {
                !uniqueOrganizations.some((o: any) => o.organizationId === submission.user.organization.organizationId) && uniqueOrganizations.push(submission.user.organization);
                !uniqueWindows.some((w: any) => w.windowId === submission.window.windowId) && uniqueWindows.push(submission.window);
            });
            this.setState({
                uniqueOrganizations: uniqueOrganizations,
                uniqueWindows: uniqueWindows
            });
        }
    }
}

票数 2

Stack Overflow用户

发布于 2020-02-28 15:48:19

保护componentDidUpdate

如果您setState内部组件确实更新了，并且没有检查更改是否相同，就会发生这种情况。

任何状态更改都将调用componentDidUpdate。

所以这条线

this.setState({
  uniqueOrganizations: uniqueOrganizations,
  uniqueWindows: uniqueWindows
});

会无限地自我触发。

添加保护，使其不会再次调用此setState。

一些如果在内部会有帮助

if(prevProps.uniqueOrganizations !== this.props.uniqueOrganizations)

但你把事情搞得很复杂。对于每个州，if语句中都会有一堆&&和||语句。

替代解决方案

我建议制作功能组件并使用新的钩子，特别是这个useEffect

您可以很容易地使用hooks api来完成这项工作，因为您可以告诉每个钩子在特定更改时触发。但是你不能使用一个类。

示例

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}