使用 react + hooks，我如何在异步 redux 调度后正确调用/使用 \"navigate()\"？答案

【问题标题】：Using react + hooks, how can i call/use "navigate()" after a async redux dispatch properly?使用 react + hooks，我如何在异步 redux 调度后正确调用/使用 \"navigate()\"？
【发布时间】：2022-08-20 19:03:55
【问题描述】：

使用时\“等待\”上\“调度（保存项目（项目））\”应该不会有什么影响
同时，如果我不使用“等待”，这两个函数将同时运行，从而导致保存的项目而不是组件重新渲染。

尽管 redux store 中的 state 改变了 view 并没有，而使用 await 实际上等待调度完成然后运行导航。

我的主要问题是如何在 redux 调度后正确导航？

import { useEffect, useRef, useState } from \'react\';
import { useDispatch } from \'react-redux\';
import { useNavigate, useParams } from \'react-router-dom\';
import { useForm } from \'../hooks/useForm\';
import { getById } from \'../services/itemService\';
import { saveItem } from \'../store/actions/itemActions\';

export function ItemEdit() {
    const dispatch = useDispatch();
    const navigate = useNavigate();
    const [item, handleChange, setItem] = useForm(null);
    const itemId = useParams().id;

    useEffect(async () => {
        await loadItem();
    }, []);

    const loadItem = async () => {
        try {
            const item = await getById(itemId)
            setItem(item);
        } catch(err) {
            setErrMsg(err.name + \': \' + err.message);
        }
    };

    const onSaveItem = async (ev) => {
        ev.preventDefault();
        await dispatch(saveItem(item));
        navigate(\'/item\')
    }

    return (
        <form onSubmit={onSaveItem}>
            <button>Save</button>
        </form>
    );
}

正确的方法取决于您的用例。如果调度的动作和导航是独立的，那么就不需要等待异步动作完成。如果有一些依赖于已调度的操作，那么您可以等待它完成/解决，然后再发出命令式导航。您的 sn-p 中的代码是否存在特定问题？有什么没有按预期工作吗？
首先感谢您的回答:)。调度没有返回任何内容，但是当我放置“等待”时，它仍然等待函数完成，然后才运行“导航（）”函数。这会在加载所需路由的组件时正确呈现。如果您不写“等待”，则不会呈现添加或编辑的项目。这对我来说很奇怪
其他地方可能会出现问题。你能包括你的redux代码吗？这个saveItem 动作创建者和处理该动作的状态切片/减速器（以及它也可能发送的任何操作)?

标签： javascript reactjs redux react-hooks

【解决方案1】：

你可以这样尝试：

dispatch(saveItem(item))
   .unwrap()
   .then(() => navigate('/item'))
   .catch(error => 'handle error')

这个对我有用。

【讨论】：