[英]How to make dispatch call synchronous in useeffect?
我正在尝试使用 CoreUI 表组件对来自我的 rest 服务器的数据进行分页。 在 useEffect 中的调度请求后,我从 redux 存储获取更新数据时遇到问题,我正在使用 redux thunk,我知道调度是异步的,但是有没有办法等待调度完成? 我厌倦了使调度成为 Promise 但它不起作用。
我成功地从 action 和 reducer 获得了更新的结果,但在 ProductsTable 中,我检查了 redux devtools 扩展,我可以看到 state 正在更改。
我从来没有从商店获得最新的价值。
此外,调度被调用了很多次,我可以在控制台 window 中看到,它不是无限循环,它会在一段时间后停止。
const ProductsTable = (props) => {
const store = useSelector((state) => state.store);
const dispatch = useDispatch();
const [items, setItems] = useState([]);
const [loading, setLoading] = useState(true);
const [page, setPage] = useState(1);
const [pages, setPages] = useState(1);
const [itemsPerPage, setItemsPerPage] = useState(5);
const [fetchTrigger, setFetchTrigger] = useState(0);
useEffect(() => {
setLoading(true);
const payload = {
params: {
page,
},
};
if (page !== 0)
dispatch(getAllProducts(payload));
console.log("runs:" + page)
console.log(store.objects)
if(!(Object.keys(store.objects).length === 0)){
setItems(store.objects.results)
setPages(store.objects.total.totalPages)
setLoading(false)
} else{
console.log("error")
setFetchTrigger(fetchTrigger + 1);
}
}, [page, fetchTrigger]);
return (
<CCard className="p-5">
<CDataTable
items={items}
fields={["title", "slug", {
key: 'show_details',
label: '',
_style: { width: '1%' },
sorter: false,
filter: false
}]}
loading={loading}
hover
cleaner
sorter
itemsPerPage={itemsPerPage}
onPaginationChange={setItemsPerPage}
<CPagination
pages={pages}
activePage={page}
onActivePageChange={setPage}
className={pages < 2 ? "d-none" : ""}
/>
</CCard>
)
}
export default ProductsTable
ProductsTable
始终具有以前的 state 数据的原因是因为您用于更新ProductsTable
的效果缺少store
作为依赖项或更具体地说是store.objects.results
; 当page
和fetchTrigger
更改时,效果变得陈旧,因为它不知道当这些依赖项更改时效果应该更改。
useEffect(() => {
// store.objects is a dependency that is not tracked
if (!(Object.keys(store.objects).length === 0)) {
// store.objects.results is a dependency that is not tracked
setItems(store.objects.results);
// store.objects.total.totalPages is a dependency that is not tracked
setPages(store.objects.total.totalPages);
setLoading(false);
}
// add these dependencies to the effect so that everything works as expected
// avoid stale closures
}, [page, fetchTrigger, store.objects, store.objects.results, store.objects.total.totalPages]);
调度被多次调用,因为您有一个递归情况,其中fetchTrigger
是效果的依赖项,但您也可以从效果内更新它。 通过删除该依赖项,您将看到更少调用此效果,即仅当页面更改时。 我不知道您需要该值的用途,因为我没有看到您共享的代码中使用了它,但是如果您确实需要它,我建议您使用 setState 的callback
版本,以便您可以引用您的fetchTrigger
的值需要而不需要将其添加为依赖项。
useEffect(() => {
// code
if (!(Object.keys(store.objects).length === 0)) {
// code stuffs
} else {
// use the callback version of setState to get the previous/current value of fetchTrigger
// so you can remove the dependency on the fetchTrigger
setFetchTrigger(fetchTrigger => fetchTrigger + 1);
}
// remove fetchTrigger as a dependency
}, [page, store.objects, store.objects.results, store.objects.totalPages]);
解释了这些问题后,您最好不要为您的items
、 pages
或loading
添加新的 state ,而是从您的 redux 商店派生,因为它看起来就是这样。
const items = useSelector((state) => state.store.objects?.results);
const pages = useSelector((state) => state.store.objects?.total?.totalPages);
const loading = useSelector((state) => !Object.keys(state.store.objects).length === 0);
并完全删除效果以支持 function 添加到onActivePageChange
事件。
const onActivePageChange = page => {
setPage(page);
setFetchTrigger(fetchTrigger => fetchTrigger + 1);
dispatch(getAllProducts({
params: {
page,
},
}));
};
return (
<CPagination
// other fields
onActivePageChange={onActivePageChange}
/>
);
但是对于初始结果,您仍然需要一些方法来获取,您可以使用仅在安装组件时运行一次的效果来执行此操作。 这应该这样做,因为调度不应该改变。
// on mount lets get the initial results
useEffect(() => {
dispatch(
getAllProducts({
params: {
page: 1,
},
})
);
},[dispatch]);
与建议的更改一起看起来像这样:
const ProductsTable = props => {
const items = useSelector(state => state.store.objects?.results);
const pages = useSelector(state => state.store.objects?.total?.totalPages);
const loading = useSelector(state => !Object.keys(state.store.objects).length === 0);
const dispatch = useDispatch();
const [page, setPage] = useState(1);
const [itemsPerPage, setItemsPerPage] = useState(5);
const [fetchTrigger, setFetchTrigger] = useState(0);
// on mount lets get the initial results
useEffect(() => {
dispatch(
getAllProducts({
params: {
page: 1,
},
})
);
},[dispatch]);
const onActivePageChange = page => {
setPage(page);
setFetchTrigger(fetchTrigger => fetchTrigger + 1);
dispatch(
getAllProducts({
params: {
page,
},
})
);
};
return (
<CCard className="p-5">
<CDataTable
items={items}
fields={[
'title',
'slug',
{
key: 'show_details',
label: '',
_style: { width: '1%' },
sorter: false,
filter: false,
},
]}
loading={loading}
hover
cleaner
sorter
itemsPerPage={itemsPerPage}
onPaginationChange={setItemsPerPage}
/>
<CPagination
pages={pages}
activePage={page}
onActivePageChange={onActivePageChange}
className={pages < 2 ? 'd-none' : ''}
/>
</CCard>
);
};
export default ProductsTable;
首先你不需要任何同步来达到你想要的结果,你必须切换你的代码,所以它不使用反应的 state 因为你已经在使用某种全球商店(我假设 redux ); 您需要做的是直接从商店中获取所有物品,不要对组件执行额外的逻辑(阅读以分离关注点); 另外我建议在服务器端进行分页,而不仅仅是在前端对数据进行分页。 (getAllProducts() 方法打开只获取一页结果而不是所有产品); 您的代码有很多分派,因为您使用 page 和 fetchTrigger 作为 useEffect 挂钩的依赖项,这意味着每次页面或 fetchTrigger 值更改时, useEffect 中的代码将再次运行,从而导致另一个分派;
这是您的代码稍作修改的部分,您需要在您的操作中添加一些额外的内容,并在您的全局 state 中添加一个加载参数
const ProductsTable = (props) => {
const dispatch = useDispatch();
// PUT THE LOADING IN THE GLOBAL STATE OR HANDLE IT VIA A CALLBACK OR ADD A GLOBAL MECHANISM TO HANLE LOADINGS INSIDE THE APP
const loading = useSelector(() => state.store.loading)
const items = useSelector((state) => state.store.objects?.results); // ADD DEFAULT EMPTY VALUES FOR objects smthg like : { objects: { results: [], total: { totalPages: 0 } }}
const pages = useSelector((state) => state.store.objects?.total?.totalPages);
const [page, setPage] = useState(1);
const [itemsPerPage, setItemsPerPage] = useState(5);
const [fetchTrigger, setFetchTrigger] = useState(0); // I DONT UNDERSTAND THIS ONE
const fetchData = () => dispatch(getAllProducts({ params: { page }}));
useEffect(() => {
fetchData();
}, []);
return (
<CCard className="p-5">
<CDataTable
items={items}
fields={["title", "slug", {
key: 'show_details',
label: '',
_style: { width: '1%' },
sorter: false,
filter: false
}]}
loading={loading}
hover
cleaner
sorter
itemsPerPage={itemsPerPage}
onPaginationChange={setItemsPerPage}
<CPagination
pages={pages}
activePage={page}
onActivePageChange={setPage}
className={pages < 2 ? "d-none" : ""}
/>
</CCard>
)
}
export default ProductsTable
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.