React设置Map状态触发过多重渲染问题求助

问题原因分析 #

第一种写法里，你在组件的渲染逻辑中直接创建tmpResorts并调用setResorts。组件每次渲染都会执行这段代码，而setResorts会触发组件重新渲染，这就形成了无限循环，自然会抛出"Too many re-renders"错误。

第二种写法虽然用了useEffect，但依赖项是tmpResorts——这个变量是每次组件渲染时都会新建的Map实例，每次渲染它的引用都不一样，导致useEffect每次都会重新执行，依然会无限调用setResorts引发循环。

正确的解决方案 #

方案1：直接在useState中初始化Map

如果这是组件的初始数据，最直接的方式是把初始化逻辑放在useState的初始值里：

const ParentComponent = ({show, onCloseModalButton}) => {
    // 直接初始化Map作为初始状态，仅首次挂载执行一次
    const [resorts, setResorts] = React.useState(() => {
        const initialMap = new Map()
        initialMap.set("Keystone", [39.6069742, -105.97011])
        initialMap.set("Breckenridge", [39.4808, -106.0676])
        initialMap.set("Vail", [39.6061, -106.3550])
        initialMap.set("Crested Butte", [38.8991, -106.9658])
        initialMap.set("Winter Park", [39.8841, -105.7627])
        initialMap.set("Copper Mountain", [39.5022, -106.1497])
        return initialMap
    })
    
    // 后续更新Map用函数式更新，确保基于最新状态修改
    const updateResort = (name, coords) => {
        setResorts(prevResorts => {
            const newMap = new Map(prevResorts)
            newMap.set(name, coords)
            return newMap
        })
    }
    
    ...
}

方案2：用useEffect挂载时初始化（空依赖）

如果必须在组件挂载后初始化（比如依赖props数据），给useEffect传空数组作为依赖，确保只在组件首次挂载时执行一次：

const ParentComponent = ({show, onCloseModalButton}) => {
    const [resorts, setResorts] = React.useState(new Map())
    
    React.useEffect(() => {
        const tmpResorts = new Map()
        tmpResorts.set("Keystone", [39.6069742, -105.97011])
        tmpResorts.set("Breckenridge", [39.4808, -106.0676])
        tmpResorts.set("Vail", [39.6061, -106.3550])
        tmpResorts.set("Crested Butte", [38.8991, -106.9658])
        tmpResorts.set("Winter Park", [39.8841, -105.7627])
        tmpResorts.set("Copper Mountain", [39.5022, -106.1497])
        setResorts(tmpResorts)
    }, []) // 空依赖，仅挂载时执行一次
    
    ...
}

后续更新Map的正确姿势

之后需要更新Map状态时，一定要用函数式更新，基于上一次的状态创建新的Map实例，避免直接修改原状态：

const addNewResort = (name, coords) => {
    setResorts(prev => {
        const newResorts = new Map(prev)
        newResorts.set(name, coords)
        return newResorts
    })
}

内容的提问来源于stack exchange，提问作者Grant