React Redux中useSelector先于dispatch触发导致map报错如何解决？

核心问题说明 #

省份数据是异步拉取的，页面首次渲染时请求还没有返回，此时你通过useSelector拿到的是Redux中dpts状态的初始值。你现在的初始值是空对象，而map是数组专属方法，因此调用dpts.map会直接抛出错误。

具体解决步骤 #

1. 修正dpts状态的初始值

找到你对应的dpts reducer文件，将dpts的初始值设置为空数组[]，而非空对象{}，参考代码如下：

// dpts.reducer.js
import { GET_DPTS } from "./dpts.actions";

// 初始值必须设为数组
const initialState = {
  dpts: []
};

export default function dptsReducer(state = initialState, action) {
  switch (action.type) {
    case GET_DPTS:
      return {
        ...state,
        dpts: action.payload
      };
    default:
      return state;
  }
}

2. 组件中添加兼容判断

即使初始值已经设为数组，也可以在渲染时添加兼容性判断，避免边界情况报错，两种实现方案可选：

方案1：条件渲染

在调用map前先判断dpts是数组再执行渲染：

// Map.jsx 修改后的渲染逻辑
return (
    <>
        <input type="text" list="dpt-ctl-list" placeholder="Filtrer par département"/>
        <datalist id="dpt-ctl-list">
            {Array.isArray(dpts) && dpts.map((dpt, index) => 
                <option value={dpt.code} key={index}>{dpt.nom}</option>
            )}
        </datalist>
    </>
)

方案2：获取状态时兜底默认值

在useSelector获取状态时直接兜底为空数组：

const dpts = useSelector(dptsSelector) || [];

可选优化：修正action的错误捕获逻辑 #

你当前的action代码中catch块写法有误，内部定义的箭头函数不会执行，接口出错时无法打印错误日志，修改如下：

// dpts.actions.js 修正后的catch块
catch (err) {
    console.log("DPTS FETCH ERROR --- " + err);
}

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