React useEffect读取localStorage更新状态触发无限循环问题求助

无限循环的原因很直接：你把filterBySqFt和filterByPrice放进了useEffect的依赖数组，但useEffect内部调用的toggleBySqft、toggleByPrice会直接修改这两个状态变量。状态更新后触发组件重渲染，依赖数组变化再次触发useEffect，形成死循环。

关于你问的「等待localStorage读取完成再执行」：localStorage.getItem是同步操作，调用后立刻就能拿到数据，不存在异步等待的必要。而且你完全不需要把这两个状态变量放进依赖数组——你的需求应该是组件初始化时从localStorage加载初始筛选值，而不是每次状态变化都重新从localStorage拉取数据覆盖状态。

正确实现方式 #

把useEffect的依赖数组改成空数组，让它只在组件挂载时执行一次，完成初始值的加载：

useEffect(() => {
    // 从localStorage读取数据，没有值时用默认值-1和组件placeholder逻辑对齐
    const minSqFt = JSON.parse(localStorage.getItem('minSqFt')) ?? -1;
    const maxSqFt = JSON.parse(localStorage.getItem('maxSqFt')) ?? -1;
    toggleBySqft(minSqFt, 'min');
    toggleBySqft(maxSqFt, 'max');

    const minPrice = JSON.parse(localStorage.getItem('minPrice')) ?? -1;
    const maxPrice = JSON.parse(localStorage.getItem('maxPrice')) ?? -1;
    toggleByPrice(minPrice, 'min');
    toggleByPrice(maxPrice, 'max');
}, []); // 空依赖数组，仅组件挂载时执行一次

额外说明 #

1. 你当前的onChange逻辑（先更新状态再存localStorage）是合理的，不需要调整——用户选择筛选值时，状态实时更新，同时持久化到localStorage，下次组件挂载时会自动读取这些值初始化状态。
2. 如果你的toggleBySqft、toggleByPrice是在组件内部定义的函数，建议用useCallback包裹，避免每次渲染都创建新函数（不过空依赖的useEffect不会受这个影响）。

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