页面刷新时丢失Redux状态数据，报‘Cannot read properties of undefined’错误

核心原因 #

Redux的状态默认存在内存里，页面刷新时整个React应用会重新初始化，Redux状态会被重置回初始值。你提到刷新时会调用API，但API请求是异步操作——页面刷新后TeamInfo页面会先渲染，此时API还没返回数据，totalTeams还是空数组，直接筛选自然会报错。

解决办法 #

1. 给页面添加加载状态判断

在Redux的状态里新增isLoading字段，初始值设为true。发起API请求时保持isLoading: true，请求成功后将其改为false，同时更新totalTeams。

在TeamInfo页面中先检查加载状态：

const { totalTeams, isLoading } = useSelector(state => state.teams);
const { teamName } = useParams();

if (isLoading) {
  return <div>加载中...</div>;
}

// 筛选球队数据前先做存在性判断
const currentTeam = totalTeams.find(team => team.name === teamName);
if (!currentTeam) {
  return <div>未找到该球队</div>;
}

// 渲染页面内容

2. 确保API请求在应用启动时执行

确认你的API请求是在App.js的useEffect中触发的，且依赖项配置正确：

// App.js示例代码
useEffect(() => {
  dispatch(fetchAllTeams()); // 该action负责发起API请求并更新Redux状态
}, [dispatch]);

3. 可选：状态持久化（避免重复请求）

如果不想每次刷新都重新拉取API数据，可以用redux-persist将Redux状态存储到本地：

• 安装依赖：npm install redux-persist
• 配置Store：

import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // 默认存储到localStorage

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['totalTeams'] // 仅持久化totalTeams字段
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = createStore(persistedReducer);
export const persistor = persistStore(store);

• 在根组件中用PersistGate包裹：

import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './store';

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={<div>加载中...</div>} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);

这样刷新页面时，Redux状态会从本地存储恢复，无需等待API返回即可获取数据。

4. 增加错误处理

在Redux状态里新增error字段，API请求失败时更新该字段，页面中判断如果存在错误则显示提示，避免因空数组筛选导致报错。

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