组件确实进行了异常更新

Question

我已经实现了一个块，如果我的条件的2满足特定条件，我将使用componentDidUpdate来调用函数。当这两个条件都满足时，它调用函数，然后进入无限循环并执行该函数无限次。

1. 我有两个下拉菜单，用于选择值。如果它们都有值，那么为此调用函数。我正在使用componentDidUpdate来关注两个状态变量的变化
2. 当下拉值更改时，它将设置我在条件中使用的状态到状态变量

下面是我的代码：

handleRegionChange(idx: any, event: any) {
const region= [""];
region[idx] = event.label;
this.setState({ region});
}
handleProductChange(idx: any, event: any) {
const productId= [""];
productId[idx] = event.key;
this.setState({ productId});
}
componentDidUpdate() {
if (
this.state.regionId?.[0] && this.state.productId?.[0]) {
this.props.fetchValues(   // Redux action function which accepts 2 parameters
this.state.regionId?.[0],
this.state.productId?.[0]
);
}}

请帮助我强调这个问题，或者通过一些关于如何解决或使用组件的说明，在这种情况下确实进行了更新。

谢谢。

Answer 1

这会导致一个无限循环，很可能是因为fetchValues会从其父项更新组件props，这会触发另一个更新，该更新将再次运行componentDidUpdate。

解决此问题的一个简单方法是，如果没有更改任何下拉值的id，则阻止进一步更新。

componentDidUpdate(prevProps, prevState) {
const hasRegionIdChanged = this.state.regionId !== prevState.regionId;
const hasProductIdChanged = this.state.productId !== prevState.productId;
if (hasRegionIdChanged || hasProductIdChanged ) {
this.props.fetchValues(
this.state.regionId?.[0],
this.state.productId?.[0]
);
}
}

https://reactjs.org/docs/react-component.html#componentdidupdate

进一步阅读，看看React如何引入钩子模式，让您提前考虑这些事情，需要一个依赖项列表：https://reactjs.org/docs/hooks-reference.html#useeffect

第二次尝试：

// Not sure if this is a multi select dropdown,
// It should be either [] or a plain value
// Multi select dropdown
handleRegionChange(idx: any, event: any) {
// You should not need to know which index is was, all you need is the region label ... (Updated for remove of duplication)
// If you have access to the spread operator, then JSON.stringify is not required below
const region = [...new Set([...this.state.region, event.label])];
this.setState({ region});
}
// Single select dropdown
handleProductChange(idx: any, event: any) {
this.setState({ productId: event.key});
}
componentDidUpdate(prevProps, prevState) {
// If it's an array/object, you need to compare them deeply
const hasRegionIdChanged = JSON.stringify(this.state.regionId) !== JSON.stringify(prevState.regionId);
const hasProductIdChanged = this.state.productId !== prevState.productId;
if (hasRegionIdChanged || hasProductIdChanged ) {
if (this.state.regionId?.length && this.state.productId) {
this.props.fetchValues(
this.state.regionId,
this.state.productId
);
}
}
}