componentDidUpdate....why内部出现无限循环错误？
我收到这个错误:错误:超过最大更新深度。当组件在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
});
}
}
}回答 2
Stack Overflow用户
发布于 2020-02-29 00: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
});
}
}
}Stack Overflow用户
发布于 2020-02-28 23: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>
);
}请看这里的代码行}, [count]);，这告诉我们只有当count改变时才会触发这个效果。这样，你就不必编写所有这些疯狂的条件来让你的更新在没有无限循环的情况下工作。
https://stackoverflow.com/questions/60455005
复制相似问题
腾讯云开发者
