React项目调用users.map报错TypeError: users.map is not a function如何解决

1 优先检查Redux配置 #

• 检查根reducer中combineReducers的注册键名是否和useSelector取值一致：你代码中取的是state.usersList，必须保证combineReducers中对应的键名就是usersList，否则state.usersList为undefined，解构时直接抛出错误导致页面崩溃。
  示例正确配置：

import { combineReducers } from 'redux';
import usersListReducer from './reducers/users/userReducer';

const rootReducer = combineReducers({
  usersList: usersListReducer // 键名必须和useSelector中取值的key完全匹配
});

2 校验用户列表Reducer逻辑 #

必须保证reducer所有返回分支都保留完整的状态结构，初始值必须将users设为空数组，禁止只返回部分属性覆盖原有状态：
示例正确reducer代码：

const initialState = {
  loading: false,
  users: [], // 初始值必须为空数组，不能为null/undefined
  error: null
};

const usersListReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'FETCH_USERS_REQUEST':
      return { ...state, loading: true }; // 必须展开原有state保留所有属性
    case 'FETCH_USERS_SUCCESS':
      return { ...state, loading: false, users: action.payload, error: null };
    case 'FETCH_USERS_FAILURE':
      return { ...state, loading: false, error: action.payload, users: [] };
    default:
      return state;
  }
};

3 修复组件代码兼容性与边界处理 #

修改后的Users.js代码如下，新增错误状态处理、类型校验、兼容旧版React的Fragment写法、可选链防止属性不存在报错：

import React, { useEffect, Fragment } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchUsers } from '../../redux/actions/users/userActions';
import Loading from '../Loading/Loading';

const Users = () => {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(fetchUsers());
  }, [dispatch]);
  // 新增兜底逻辑，防止state.usersList为undefined时解构报错
  const usersList = useSelector(state => state.usersList) || { loading: false, users: [], error: null };
  const { loading, users, error } = usersList;

  console.log(users, loading, error);
  return (
    <div className='container-fluid'>
      <h1 className='text-center m-5'>List of users {Array.isArray(users) ? users.length : 0}</h1>
      <hr className='text-white' />
      <div className='row text-center justify-content-center'>
        {/* 新增错误状态处理分支 */}
        {error ? (
          <div className="alert alert-danger">加载失败：{error.message || error}</div>
        ) : loading ? (
          <Loading />
        ) : (
          <Fragment>
            {/* 校验users为数组才执行遍历，避免非数组类型调用map报错 */}
            {Array.isArray(users) &&
              users.map(user => (
                // 新增可选链兜底_id，防止用户数据无_id属性报错
                <div className='col-lg-3' key={user?._id || Math.random()}>
                  <div className='card'>
                    <div className='card-body'>
                      <h5 className='card-title'>{user?.name}</h5>
                      <p className='card-text'>{user?.email}</p>
                      <i className='far fa-address-card h2 text-info'></i>
                    </div>
                  </div>
                </div>
              ))}
              {Array.isArray(users) && users.length === 0 && <p>暂无用户数据</p>}
          </Fragment>
        )}
      </div>
    </div>
  );
};

export default Users;

4 校验接口返回值 #

打开浏览器控制台查看console.log(users)的输出结果，确认接口返回的users是数组类型，若为对象、null等其他类型，需要修改后端接口或action层的逻辑，保证传入reducer的users始终是数组。

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