React Navigation跳转时undefined is not an object及返回页数据丢失问题

问题根因 #

你的Redux reducer写法存在错误，每次更新state时没有保留原有字段，直接覆盖了整个state对象：

• 当触发TRANSACTIONS类型的action时，返回的新state只包含transactionsList字段，原有transactionDetails字段会被直接删除，变为undefined
• 当触发TRANSACTION_DETAILS类型的action时，返回的新state只包含transactionDetails字段，原有transactionsList字段会被直接删除，变为undefined

所有异常现象的对应解释 #

1. 跳转Screen B时报transactionDetails.length错误：Screen A拉取列表时触发TRANSACTIONS action，把transactionDetails字段删了，所以Screen B取到的是undefined，调用length就报错
2. 给Screen B加判断后Screen A报错：Screen B拉取详情时触发TRANSACTION_DETAILS action，把transactionsList字段删了，Screen A仍在路由栈中，useSelector监听到state变化会触发重渲染，取到的transactions是undefined，调用length就报错
3. 从Screen B返回Screen A时数据丢失：触发TRANSACTION_DETAILS时transactionsList已经被删除，返回后没有重新触发拉取逻辑，所以拿不到原有数据

修复方案 #

修改reducer的逻辑，返回新state时先展开原有state，保留未修改的字段：

export default (state = initialState, action) => {
    switch (action.type) {
        case TRANSACTIONS:
            return {
                ...state, // 保留原有state的所有字段
                transactionsList: action.transactions,
            };

        case TRANSACTION_DETAILS:
            return {
                ...state, // 保留原有state的所有字段
                transactionDetails: action.transactionDetails,
            };

        default:
            return state;
    }
};

可选健壮性优化 #

可以在取值时增加兜底逻辑，避免后续其他修改引发同类报错：

• useSelector取值时给空默认值：

  const transactions = useSelector(
      (state) => state.transactions.transactionsList ?? []
  );
  const transactionDetails = useSelector(
      (state) => state.transactions.transactionDetails ?? []
  );
  

• 调用length前加可选链判断：

  transactions?.length === 0
  transactionDetails?.length === 0
  

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