React Hooks+Redux实现CRUD时dispatch获取全量数据返回undefined如何解决

问题修复方案 #

1. 补全useEffect的依赖数组 #

当前你的useEffect没有传入依赖数组，会导致组件每渲染一次就触发一次retrieveCars请求，添加空依赖数组让请求只在组件挂载时执行一次：

useEffect(() => {
  dispatch(retrieveCars());
}, []); // 新增空依赖数组

2. 给carReducer添加default分支 #

Redux要求所有reducer必须在未匹配到action类型时返回原有state，你目前的switch没有default分支，其他action触发时会把cars state重置为undefined：

const initialState = [];
  
function carReducer(cars = initialState, action) {
  const { type, payload } = action;
  switch (type) {
    case CREATE_CAR:
      return [...cars, payload];
    case RETRIEVE_CARS:
      return payload;
    // 新增default分支
    default:
      return cars;
  }
}

3. 检查rootReducer的挂载配置 #

确认你用combineReducers合并reducer时，carReducer对应的key是cars，和useSelector(state => state.cars)的取值字段一致，示例配置如下：

// rootReducer 参考示例
import { combineReducers } from 'redux';
import carReducer from './carReducer';

const rootReducer = combineReducers({
  cars: carReducer, // 此处key必须为cars，否则useSelector无法正确取值
  // 其他业务reducer配置
});

4. 可选：渲染前增加数组类型校验 #

可以进一步增加类型判断，避免非数组值调用map报错：

<tbody>
  {/* 把cars&&替换为Array.isArray(cars)判断 */}
  {Array.isArray(cars) &&
    cars.map((data) =>
      <tr key={data.idCars}>
        <th scope="row">{data.idCars}</th>  
        <td>{data.carName}</td>
        <td>{data.carModel}</td>
        <td>
          <Link to={"/classement/update/" + data.idCars}
            className="btn btn-info"
          >
            Edit
          </Link>
          <button  className="btn btn-danger" onClick={() => deleteC(data.idCars)}>
            Remove
          </button>
        </td> 
      </tr>
    )
  }
</tbody>

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