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

【问题标题】：React warning Maximum update depth exceeded反应警告超过最大更新深度
【发布时间】：2020-01-11 04:16:17
【问题描述】：

这是这个问题的后续问题，与我的问题最接近：

我正在创建一个小型 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，所以我认为它只会在发生变化时重新渲染..

【问题讨论】：

不是每次调用 setPropertiesMapFunc 时都会重新渲染组件吗？意思是任何时候你设置状态，即使新状态是相同的？
地图的初始化是在组件内部还是外部？
@trixn 好的，这似乎是你所说的。每次都会重新创建地图，因此会导致重新渲染。如果您将其添加为答案，我会接受它

标签： reactjs react-hooks

【解决方案1】：

properties 是一个 Map，当在依赖数组中传递给 useEffect 时，它将在每次渲染时重新创建，并且在比较时，它总是不等于自身，因为地图，与其他非- JS 中的原始类型通过引用而不是值进行比较。所以这将导致useEffect 中的函数在每次重新渲染时运行。

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

【讨论】：

因为地图对象不会改变，在这种情况下，将地图对象的初始化移动到组件之外也足够了，这样它们就不会在每次渲染时重新创建或将它们包装在 @ 987654325@.

【解决方案2】：

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

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

【讨论】：