1

目前我在我当前的项目中使用React、Redux Toolkit和 Formik ，情况是当我在 onSubmit 方法的帮助下提交表单数据（使用 useFormik() 钩子）时；在 onSubmit 方法中，我调用 Redux 操作（使用 useDispatch() 钩子），然后使用 useSlector 钩子直接访问状态数据，但我总是得到以前的值。示例代码如下：

 const formik = useFormik({
    initialValues,
    onSubmit : (values) => {
      alert(JSON.stringify(values));
      dispatch(loginSumbmit(values));    
      console.log(authState); // get previous data
    },
    validationSchema,
  });

4

1 回答 1

2

您对 Formik 执行此操作的大部分时间是检查验证错误。假设您使用createAsyncThunk的是 Redux-Toolkit for loginSumbmit，您可以立即获取有效负载并通过执行以下操作检查错误/成功：

const formik = useFormik({
    initialValues,
    onSubmit : async (values) => {
      const resultAction = await dispatch(loginSumbmit(values));
      if (loginSumbmit.fulfilled.match(resultAction)) {
        // it was a success, you can check resultAction.payload or use `unwrapResult`
      } else {
          // there was an error, handle it
      }

    },
    validationSchema,
  });

另一种选择是：

const formik = useFormik({
    initialValues,
    onSubmit : values => dispatch(loginSumbmit(values))
    .then(unwrapResult)
    .then(originalPromiseResult => {
        // do something with the success payload
    })
    .catch(serializedError => {
        // do something with the error payload
    }),
    validationSchema,
  });

此处的文档中有此确切行为的示例：https ://redux-toolkit.js.org/api/createAsyncThunk#examples

通常，您永远不需要在同一滴答中的 thunk 之后立即获得商店的确切快照。您尝试使用选择器获取的任何内容都应该在导致存储更改的有效负载中可用。

于 2020-07-01T19:31:32.913 回答