Typescript 与toast.error一起react 中的Async TUNK错误消息

发布于12月13日

我已经实现了一个带有错误处理的异步登录thunk.成功消息正确显示，但错误消息不正确.

export const loginThunk = createAsyncThunk(
  'login',
  async (credentials: { email: string; password: string }, { rejectWithValue }) => {
    try {
      const res = await api.post('/api/login', credentials)
      return res.data
    } catch (error) {
      if (error instanceof AxiosError) {
        return rejectWithValue(error.response?.data)
      }
    }
  }
)

extraReducers: (builder) => {
    //** Login */
    builder.addCase(loginThunk.pending, (state) => {
      state.isLoading = true
    })
    builder.addCase(loginThunk.fulfilled, (state, action) => {
      state.user = action.payload.user
      state.isLoggedIn = true
      state.isLoading = false
    })
    builder.addCase(loginThunk.rejected, (state, action) => {
      const errorMsg = action.payload
      if (typeof errorMsg === 'string') {
        state.error = errorMsg
      }
      state.isLoading = false
      return state
    })
}

推荐答案

createAsyncThunks个突克将会有103个回报一个已解决的promise .onSubmitHandler应该解包由loginThunk动作返回的已解析promise ，以确定该动作是否成功或是否存在错误.

有关详情，请参阅:

Handling Thunk Results个
Handling Thunk Errors个

您可以处理promise 链中的错误:

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

  dispatch(loginThunk(credentials))
    .unwrap()
    .then((res) => {
      const { message, token } = res.payload;
      localStorage.setItem('token', token);
      toast.success(message);
      navigate('/');
    })
    .catch((error) => {
      let errorMessage = 'Something went wrong';

      if (error instanceof AxiosError) {
        const errorMessage = error.response?.data.msg;
      }

      toast.error(errorMessage);
    });
};

或者在try/catch名中有async/await名:

const onSubmitHandler = async (e: FormEvent) => {
  e.preventDefault()
  try {
    const res = await dispatch(loginThunk(credentials)).unwrap();

    const { message, token } = res.payload;
    localStorage.setItem('token', token);
    toast.success(message);
    navigate('/');
  } catch (error) {
    let errorMessage = 'Something went wrong';

    if (error instanceof AxiosError) {
      const errorMessage = error.response?.data.msg;
    }

    toast.error(errorMessage);
  }
};