在 Formik onSubmit 中使用 Redux Hooks

Question

我目前正在为我的大学做作业。

我们应该将 Action Creators 和 Reducers 集成到我们的 React 项目中。

该项目是关于拥有一个货币交易表格，其中包含一个显示所有货币交易的列表。

Image of the Application

我们在 formik 的帮助下构建了表单，我的代码如下所示。

const formik = useFormik({
initialValues: { ownwho: '', username: '', amount: '' },
validationSchema: validationSchema,
onSubmit: values => dispatch(createMoneyTransaction(1,2,3))
})

表单为普通表单，有handleSubmit和handleChange

<form className={styles.moneytransaction_form} onSubmit={formik.handleSubmit}>
  <div className={styles.radio_wrapper}>
    <div>
      <label>I owe somebody</label>
      <Input type='radio' name='ownwho' value='IOweYou' onChange={formik.handleChange} />
    </div>
    <div>
      <label>Somebody owes me</label>
      <Input type='radio' name='ownwho' value='YouOweMe' onChange={formik.handleChange} />
    </div>
  </div>

我的 Dispatch 目前看起来像这样

const dispatch = useDispatch()

动作创作者

Image of the Action Creator for the Post Method

现在我有以下问题。

在 formik onsubmit 句柄内部使用调度挂钩时，我通过反应得到了这个错误

Image of the Error

我确实认为这是因为钩子必须在功能组件中，而 formik 可能不是。

如果有人能帮我解决这个问题，我会很高兴，因为我不完全理解这个钩子与 formik 一起使用的问题是什么。

Answer 1

您没有遵循钩子规则（在本例中，useDispatch() 是钩子）。要么是因为您没有在正确的位置调用挂钩，要么是因为您可能有条件地或从非功能组件调用它。

在 Formik onSubmit 中使用 Redux Hooks

Using Redux Hooks in a Formik onSubmit

javascript

reactjs

react-redux

formik

react-hooks