在Formik onSubmit中使用Redux挂钩



我目前正在为我的大学解决一项家庭作业。

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

该项目是关于有一个货币交易表与一个列表,显示所有的货币交易。

应用程序的图像

我们在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>

我的调度目前看起来像

const dispatch = useDispatch()

动作创建者

后方法的动作创建者的图像

现在我有以下问题。

当在formik onsubmit句柄内使用调度钩子时,我通过react 得到了这个错误

错误的图像

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

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

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

相关内容

  • 没有找到相关文章

最新更新