React Redux：在调度之前调用使用 Selector答案

【问题标题】：React Redux : use Selector is called before dispatchReact Redux：在调度之前调用使用 Selector
【发布时间】：2021-10-11 18:57:40
【问题描述】：

我正在使用 redux 创建一个反应应用程序。
我需要我的应用程序中所有页面的法语部门列表，所以我将其置于 redux 状态。

我在 useEffect 钩子中调度 App 组件中的动作（注意我在组件中使用了另一个 useEffect，但是当动作在另一个块中时它也不起作用）

我有一个页面需要使用这个列表，所以我使用 useSelector 钩子选择它。但它返回一个空对象，我有一个错误告诉我dpts.map is not a function

我认为该动作是在页面呈现后调度的，因为当我在动作中记录 api 调用的响应时，它出现在 useSelector 结果的日志之后。

我在另一个页面中使用了另一个 state 属性，但它似乎适用于另一个页面。

App.jsx

const dispatch = useDispatch();
useEffect(() => {
        dispatch(getDpts());
}, [dispatch])

这是与 : 相关的操作：

dpts.actions.js

import axios from "axios";

export const GET_DPTS = "GET_DPTS";
export const getDpts = () => {
    return async (dispatch) => {
        try {
            const res = await axios({
                method: "get",
                url: "https://geo.api.gouv.fr/departements",
            });
            console.log("done : " + res)
            dispatch({ type: GET_DPTS, payload: res.data });
        } catch (err) {
            (err) => console.log("DPTS FETCH ERROR --- " + err);
        }
    };
};

地图.jsx

function DptCtl() {
    // Control
    const map = useMap();

    // List of dpts and provinces
    const dpts= useSelector(dptsSelector);
    console.log(dpts);

    return (
        <>
            <input type="text" list="dpt-ctl-list" placeholder="Filtrer par département"/>
            <datalist id="dpt-ctl-list">
                {dpts.map((dpt, index) => 
                    <option value={dpt.code} key={index}>{dpt.nom}</option>
                )}
            </datalist>
        </>
    )
}

【问题讨论】：

标签： javascript reactjs redux

【解决方案1】：

这取决于你如何在 reducer 中初始化你的状态。

例如，您创建一个具有此初始状态的 reducer：

const initialState={}

之后，根据动作，状态变为：

   {dpts:someDataArray}

问题是您的应用中某处有一个dpts.map，因为dpts 一开始就是undefined，您会收到dpts.map 不是函数的错误。

解决这个问题的方法是简单地将 dpts 作为一个空数组放在 initialState 中：

    const initialState={dpts:[]}

如果这不是您的代码的问题，即 dpts 在 initialState 中未定义，则它可能被初始化为没有 map 方法的字符串或对象。

【讨论】：

它工作正常！谢谢！