React页面刷新时获取redux传入的props.filters为undefined问题求助

问题根因 #

1. 时序不匹配：页面刷新时组件挂载渲染优先级高于Redux状态初始化流程。无论你的Redux状态是从异步接口拉取，还是从本地存储恢复，都会晚于组件首次渲染，所以首次拿到的props.filters为undefined，本地state初始值自然也是空。
2. 状态更新未触发重渲染：Redux依赖不可变数据判断是否需要触发关联组件重渲染，如果你在reducer中修改filters时直接修改原数组，没有返回新的数组引用，react-redux无法检测到状态变化，就不会主动触发当前组件重渲染。只有点击页面触发其他重渲染逻辑时，组件才会拿到已经更新的props.filters，你用setTimeout能生效也是碰运气刚好等够了Redux初始化的时间，网络环境变化时很容易失效，绝对不要作为正式方案使用。
3. useEffect依赖项错误：你最初的useEffect没有指定正确的依赖项，无法在props.filters更新时自动触发同步逻辑。

修复步骤 #

1. 修正Redux reducer写法，保证返回不可变数据（如果用Redux Toolkit可跳过这步，内置immer自动处理不可变）：

// 错误写法 直接修改原state，不会触发重渲染
case 'UPDATE_FILTERS':
  state.filters = action.payload;
  return state;

// 正确写法 返回全新state对象，filters使用新数组引用
case 'UPDATE_FILTERS':
  return {
    ...state,
    filters: [...action.payload]
  };

2. 优化组件侧状态同步逻辑，给useEffect添加正确依赖，同时添加空值兜底：

// 初始值加空数组兜底，避免undefined导致的后续报错
const [filters, setFilters] = useState<string[]>(props.filters ?? []);

useEffect(() => {
  if (!_.isEqual(filters, props.filters)) {
    setFilters(props.filters ?? []);
  }
// 监听filters和props.filters变化，自动同步
}, [filters, props.filters]);

如果你没有在组件内部单独修改filters、不需要和Redux状态做隔离的话，完全可以删掉本地的filters state，直接使用props.filters渲染，从根源上避免两者不同步的问题。

3. 如果filters属于全局必要基础数据，可以在路由守卫或者根组件增加初始化判断，等Redux拉取完必要数据之后再渲染业务组件，避免子组件出现空状态。

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