React Redux:在调度之前调用use Selector

Question

我正在创建一个react应用程序与redux。
我需要我的应用程序中所有页面的法语系列表，所以我把它放在redux状态。

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

我有一个需要使用这个列表的页面，所以我用useSelector钩子选择它。但是它返回一个空对象，我有一个错误告诉我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

它取决于你初始化状态在减速器。

创建一个初始状态为

的reducer

const initialState={}

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

{dpts:someDataArray}

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

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

const initialState={dpts:[]}

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