React+Redux使用useSelector获取数据时entries.map不是函数报错问题

核心原因 #

你获取的state.entry.entries并非数组类型，导致无法调用map方法。结合场景判断，大概率是数据存入Redux时未正确提取数组部分，或是初始状态类型不匹配。

排查与修复步骤 #

1. 检查entrySlice的初始状态 #

确保entries初始值为数组，而非对象或null：

// entrySlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  entries: [], // 必须设为数组，不能是{}或null
  loading: false,
  error: null
};

const entrySlice = createSlice({
  name: 'entry',
  initialState,
  reducers: {
    // 你的reducer逻辑
  }
});

export default entrySlice.reducer;

2. 修正dispatch时的数据传入逻辑 #

你的service返回response.data，但Postman响应里的数组嵌套在data字段下，因此实际需要存储的是response.data.data（外层data是axios返回结构，内层data是接口的数组数据）。

修改App.jsx中的dispatch代码：

// App.jsx
import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { setEntries } from './entrySlice';
import service from './service';

function App() {
  const dispatch = useDispatch();

  useEffect(() => {
    const fetchEntries = async () => {
      try {
        const response = await service.getEntries();
        // 提取接口返回的数组部分传入store
        dispatch(setEntries(response.data.data));
      } catch (err) {
        console.error(err);
      }
    };
    fetchEntries();
  }, [dispatch]);

  return <div>...</div>;
}

export default App;

3. 确认entrySlice的reducer赋值逻辑 #

保证setEntries reducer正确将payload赋值给entries：

// entrySlice.js
const entrySlice = createSlice({
  name: 'entry',
  initialState,
  reducers: {
    setEntries: (state, action) => {
      state.entries = action.payload; // 直接将数组payload赋值给state.entries
    },
    // 其他reducer逻辑...
  }
});

export const { setEntries } = entrySlice.actions;
export default entrySlice.reducer;

4. 渲染前增加类型校验（可选但推荐） #

在Entries.jsx中先判断entries是否为数组，避免报错：

// Entries.jsx
import { useSelector } from 'react-redux';

function Entries() {
  const entries = useSelector(state => state.entry.entries);

  if (!Array.isArray(entries)) {
    return <div>加载中或数据格式异常</div>;
  }

  return (
    <div>
      {entries.map(entry => (
        <div key={entry.id}>{entry.name}</div>
      ))}
    </div>
  );
}

export default Entries;

验证方法 #

1. 打开React DevTools，查看Redux store中entry.entries的类型，确认是数组。
2. 若仍有问题，在App.jsx的dispatch前打印response.data，确认结构是否符合预期：

console.log('接口返回数据：', response.data);
// 应输出类似 { statusCode: 200, data: [/* 客户数组 */], message: 'success' } 的结构

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