我有下面的代码,但它给出了错误:
const fetchData = (name) => {
return async (dispatch) => {
dispatch(fetchDataRequest());
await axios
.get(url)
.then((response) => {
data = response;
})
.catch((error) => {
data = [];
});
return data;
};
};
组件代码:
import {fetchData} from "../../Actions/userActions"
import {useEffect, useState, forwardRef} from "react";
export const ParentModal = forwardRef((props, ref) => {
console.log(" type:" + typeof fetchData );
const [initialLoading, setinitialLoading] useState(true);
useEffect (async () => {
fetchData("foo").then(async (res) => {
console.log("result arrived!!!");
});
}, []);
return (initialLoading) ? (
<mui.CircularProgress className="smloader" />
ReactDOM.createPortal (
<div>
<ChildModal
open={open}
/>
....
但它给出了这个错误:
Uncaught(in promise)TypeError:(0,_Serviceworkers_redux_userworkers_WEBPACK_IMPORTED_MODULE_4_fetchData(...).则不是函数fetchData
是对远程API的调用。我想要实现的是,只有在来自远程API的数据到达ParentModal
后才呈现ChildModal
。
请注意,控制台打印:类型:函数
结果来了!!!从未打印。
动作是形实转换动作和归约器。大多数代码被删除,因为实际代码要大得多。只要减少到最低限度就可以解决问题。
3条答案
按热度按时间4xy9mtcn1#
fetchData函数返回一个形实转换程序(一个返回函数的函数)而不是一个promise。要调用形实转换程序,需要使用
dispatch
调用它ps.在
.then()
回调中将initialLoading标志设置为false,以便在数据到达后呈现ChildModalRedux官方文档:https://redux.js.org/advanced/async-actions#async-action-creators
s4chpxco2#
首先,修改你的fetchData,因为我看到一个不完整的代码或一些语法错误。
修改fetchData函数
1.调用函数并检查是否有任何返回数据
hgc7kmma3#
据我所知,
fetchData
似乎是一个异步操作创建器,例如。一个Thunk动作,因此它需要被 * 分派 * 到商店。在你分享的代码中,你只调用了第一个函数,而不是返回Promise对象的返回函数。将
async/await
与Promise链混合使用通常也被认为是反模式。使用一个或另一个。useEffect
钩子回调函数也不能是async
函数,它必须是常规的同步函数。