react警告超过最大更新深度

IT技术 reactjs react-hooks
2021-04-26 12:45:19

这是这个问题的后续问题,最接近我的问题:

useEffect 中的无限循环

我正在创建一个小型 React.js 应用程序来研究该库。我收到此警告:

超出最大更新深度。当组件在 useEffect 中调用 setState 时会发生这种情况,但 useEffect 要么没有依赖项数组,要么依赖项之一在每次渲染时发生变化。

我有一个功能组件,其中有以下代码:

const propertiesMap2 = new Map([  //There is also propertiesMap1 which has the same structure
["TITLE4",
    {
        propertyValues: {
            myProperty10 : "myVal1",
            myProperty11 : "myVal2",
            myProperty12 : "myVal3",                                                            
        },
        isOpen: true
    }
],
["TITLE5",
    {
        propertyValues: {
            myProperty13 : "myVal4",
            myProperty14 : "myVal5",
            myProperty15 : "myVal6",                                                             
        },
        isOpen: true
    }
],
["TITLE6",
    {
        propertyValues:{
            myProperty16 : "myVal7",
            myProperty17 : "myVal8",
            myProperty18 : "myVal9",
        },
        isOpen: true
    }                                                        
]
]);

const [properties, setPropertiesMapFunc] = useState(new Map());
useEffect(()=>
{
    let mapNum = Number(props.match.params.id);
    setPropertiesMapFunc(mapNum === 1 ?propertiesMap1 : propertiesMap2);
}, [properties]);

每次都会选择正确的属性映射,但就像我说的那样,我收到了这个错误。为什么我会得到它,如果它propertiesMap是不变的,没有任何变化,并且properties作为参数传递给setEffect,所以我认为它只会在某些东西发生变化时重新渲染..

2个回答

因为您是在组件函数内部创建地图对象,所以它们将在每次渲染时重新创建。因此,您的效果会将新地图设置为新状态,这将依次触发另一次重新渲染,并且您的效果将再次被调用,从而导致无限更新循环。

您可以将地图对象的定义移到组件之外以解决此问题。

properties是一个Map,当传入依赖数组时useEffect,会在每次渲染时重新创建,比较时总是不等于自身,因为map和JS中的其他非原始类型一样是通过引用比较的而不是按value。所以这将导致useEffect在每次重新渲染时运行内部的函数

您需要将其包装成某种深度比较函数:https : //stackoverflow.com/a/54096391/4468021