React报错TypeError: state is not iterable 联系人列表功能异常如何修复？

问题根因 #

你遇到的state is not iterable错误和初始数据不展示，核心原因是Redux Store的reducer挂载方式和mapStateToProps的取值逻辑不匹配：
如果你用了combineReducers整合多个reducer，比如按如下方式注册：

import { combineReducers, configureStore } from '@reduxjs/toolkit';
import { contactReducer } from './contactReducer';

const rootReducer = combineReducers({
  contacts: contactReducer // 联系人reducer被挂载到contacts键下
})
export const store = configureStore({ reducer: rootReducer })

这种场景下全局state是对象结构，state.contacts才是你定义的联系人数组，但你当前在mapStateToProps里直接写contacts: state，拿到的是整个根reducer对象而非数组，自然无法展开迭代，也遍历不出初始数据。

修复步骤 #

1. 修正所有组件的mapStateToProps取值逻辑 #

把AddContact/index.js、home.js里的mapStateToProps调整为从对应reducer挂载键取值：

// 原有错误写法
const mapStateToProps = (state) => ({
  contacts: state,
});
// 修正后写法，键名要和combineReducers里注册的contactReducer对应键名一致
const mapStateToProps = (state) => ({
  contacts: state.contacts,
});

如果你没有使用combineReducers，是直接把contactReducer传给createStore/configureStore的，检查传reducer时是否多套了一层对象，直接传reducer本身即可。

2. 修复contactReducer的隐含逻辑问题 #

你当前的reducer还有两处不符合Redux规范的写法，会导致后续出现隐性bug，同步修正即可：

const initialState = [
    { id: 0, name: "Raman Sharma", Level:  " 20", Progress: "Master" },
    { id: 1, name: "Test Name", Level:  " 25", Progress: "Master" },
  ];
  
  export const contactReducer = (state = initialState , action) => {
    switch (action.type) {
      case "ADD_CONTACT":
        return [...state, action.payload];
      case "DELETE_CONTACT":
        // 修正filter逻辑，只需返回布尔值判断是否保留项
        return state.filter(contact => contact.id !== action.payload);
      case "UPDATE_CONTACT":
        // 修正不可变更新逻辑，不修改原对象，返回全新的对象
        return state.map(contact => 
          contact.id === action.payload.id ? {...contact, ...action.payload} : contact
        );
      case "RESET_CONTACT":
        return [{ name: null, Level: null, Progress: null }];
      default:
        return state;
    }
  };

修改完成后重启项目，初始数据即可正常展示，新增联系人也不会再报迭代错误。

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