React-Native中多API写入同个Redux state后数据不持久化问题咨询

问题排查&修复方案 #

1. useCallback 依赖缺失导致闭包陷阱 #

你的useCallback依赖数组为空，会导致回调内部永远读取第一次渲染时的变量快照：

• 后续exploreData更新后，回调里拿到的还是初始的旧值，自然会出现"有时候能读到缓存有时候读不到"的现象
• 修复方式：把所有回调内部用到的外部变量都加入依赖数组

const handleCategoryClick = useCallback((categoryName) => {
  const selected =
    selectedQuery.name.toLowerCase() + '_' + categoryName.toLowerCase() + '_chefs'; // 这里还要补后缀，参考问题2的修复要求
  if (exploreData[selected]) {
    setSelectedCategory(categoryName);
    setData(exploreData[selected]);
  } else {
    selectedQuery[`dataFunc_${categoryName}`]();
    setSelectedCategory(categoryName);
  }
// 补全所有依赖
}, [exploreData, selectedQuery, setSelectedCategory, setData]);

2. 存储key和读取key不匹配 #

你reducer里存储的字段后缀固定是_chefs，但你读取时拼接的selected默认没有加这个后缀，必然会出现key对不上的问题；同时存储和读取的大小写规则不一致也会导致匹配失败：

• 例：你存的key是new_chefs，但你拼接出来的读取key是new，自然读不到缓存
• 修复方式：存储和读取时统一key的生成规则

// reducer 里先转小写再拼接key
case types.EXPLORE_CHEF_BY_TYPE:
  return {
    ...state,
    [`${action.data.type.toLowerCase()}_chefs`]: action.data.data,
  };

3. mapStateToProps和组件参数解构错误 #

你当前的mapStateToProps直接返回state.explore，相当于把state.explore的所有一级字段都拆成了单独的props传入组件，而你组件参数里写的...exploreData拿到的是除了前面显式解构的props之外的剩余属性，根本不是完整的state.explore对象：

• 修复方式：调整mapStateToProps把整个explore state作为单个props传入

const mapStateToProps = (state) => {
  return {
    exploreData: state.explore
  };
};
// 组件参数直接接收exploreData
function ExploreScreen({
  // 其他props
  exploreData
}) {
// 组件逻辑
}

4. 空值判断导致的误判 #

如果接口返回的action.data.data是空数组/空对象，你当前的判断if (exploreData[selected])会把空值判定为false，触发重复请求：

• 修复方式：调整判断逻辑，判断key是否存在而非值是否为假

if (Object.prototype.hasOwnProperty.call(exploreData, selected)) {
  // 走缓存逻辑
}

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