React Redux：在发送之前调用使用选择器

Question

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

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

我有一个页面需要使用这个列表，所以我 select 使用 useSelector 挂钩。但是它 returns 是一个空对象，我有一个错误告诉我 dpts.map is not a function

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

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

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);
        }
    };
};

Map.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>
        </>
    )
}

Answer 1

这取决于您如何在减速器中初始化状态。

例如，您使用此初始状态创建减速器：

const initialState={}

稍后，根据操作，状态更改为：

   {dpts:someDataArray}

问题是您的应用程序中某处有一个 dpts.map，因为 dpts 在开始时是 undefined，您收到的错误是 dpts.map 不是功能。

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

    const initialState={dpts:[]}

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

React Redux：在发送之前调用使用选择器

React Redux : use Selector is called before dispatch

javascript

reactjs

redux