更新商店后组件不更新

Question

我有一个asyncThunk：

    export const loginThunk = createAsyncThunk(     "user/login",     async ({ login, password }: { login: string; password: string }) => {         const { token } = await authService.login(login, password);         return token;     } );

在商店使用：

    extraReducers: (builder) =\> {
    builder
    .addCase(loginThunk.fulfilled, (state, action) =\> {
    state.token = action.payload;
    state.isLoading = false;
    state.error = false;
    })
    .addCase(loginThunk.pending, (state) =\> {
    state.isLoading = true;
    state.error = false;
    })
    .addCase(loginThunk.rejected, (state, action) => {
       state.isLoading = false;
       state.error = true;
    })

目标组件：

const Auth = () =\> {
const dispatch = useAppDispatch();
const { token, error } = useAppSelector((state) =\> state.auth);
const \[login, setLogin\] = useState("");
const \[password, setPassword\] = useState("");
const navigate = useNavigate();

    const onSubmitHandle = async (e: FormEvent) => {
        e.preventDefault();
        if (login !== "" && password !== "") {
            await dispatch(loginThunk({ login: login, password: password }));
            !error && token !== null ? navigate("/editor") : null;
        }
    };
    
    return (
        <div className="login">
            <form className="login__form" onSubmit={onSubmitHandle}>
                <h2 className="login__title">Editor</h2>
                <label className="login-form__label">
                    Login
                    <input
                        type="text"
                        name="login"
                        onChange={(e) => setLogin(e.target.value)}
                    />
                </label>
                <label className="login-form__label">
                    Пароль
                    <input
                        type="text"
                        name="password"
                        onChange={(e) => setPassword(e.target.value)}
                    />
                </label>
                <button type="submit" className="login__button">
                 Enter
                </button>
                {error ? "Error, try do it later" : null}
            </form>
        </div>
    );

};

单击“Enter”后，我获取令牌并将其存储，在 redux-devtools 中我看到令牌已存储，但组件没有更新。有趣，但是组件更新，如果我更改字段错误，但令牌没有。 我不知道该怎么办才能解决这个问题

Answer 1

您仅在“onSubmitHandle()”中访问令牌。仅在此处检查令牌，而不是在组件重新渲染时检查。

添加“useEffect”并检查令牌，然后在 useEffect 中进行导航。

Auth 组件重新渲染，但导航更改不执行。