typescript 更新存储后组件不更新

bvpmtnay 于 12个月前发布在 TypeScript

关注(0)|答案(2)|浏览(165)

我有一个异步Thunk：

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>
  );
};

型
点击“回车”后，我得到令牌并将其存储。在Redux-Devtools中，我看到令牌在存储中，但组件不更新。有趣的是，但组件更新，如果我更改字段错误，但令牌没有。

typescript

来源：https://stackoverflow.com/questions/77455854/component-dont-update-after-updating-store

2条答案

按热度按时间

ui7jx7zq1#

createAsyncThunksalways resolve。如果你想使用返回的token值，那么你需要做两件事。
1.等待 * 和 * unwrap解析结果。有关详细信息，请参阅处理思考结果。
1.保存返回的token值，而不是在外部作用域中选择的token值上引用过时的闭包。
范例：

const onSubmitHandle = async (e: FormEvent) => {
  e.preventDefault();

  if (login !== "" && password !== "") {
    try {
      const token = await dispatch(
        loginThunk({ login, password })
      ).unwrap(); // <-- unwrap Thunk result

      // If we get this far then no error yet
      if (token !== null) {
        navigate("/editor");
      }
    } catch(error) {
      // catch/handle any thrown errors or rejected Promises
    }
  }
};

字符串

赞(0）回复(0）举报 12个月前

s8vozzvw2#

您仅在'onSubmitHandle（C）'中访问标记。仅在那里检查标记，而不是在组件重新呈现时检查。
添加'useEffect'并在那里检查令牌，并在useEffect中进行导航。
Auth组件会重新呈现，但不会执行导航更改。

赞(0）回复(0）举报 12个月前