Question

这是该问题的跟进问题，与我的问题最接近：

我正在创建一个小的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，所以我认为只有当那里的内容发生变化时它才会重新呈现。

Answer 1

useEffect是一个Map，并且在依赖项数组中传递给useEffect时，它将在每个渲染器上重新创建，并且在比较时，它始终不等于自身，因为map，与JS中其他非原始类型相同的类型是通过引用而不是通过值进行比较的。因此，这将导致const initialState = { rollNo: '', firstName: '', middleName: '', } const reducer = (initialState,action) => { /// }内部的函数在每次重新渲染时都运行。

您需要将其包装到某种深度比较功能中：https://stackoverflow.com/a/54096391/4468021

Answer 2

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

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

反应警告超过最大更新深度

2 个答案: