我目前正在为我的大学解决一项家庭作业。
我们应该将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()
是钩子(。要么是因为您没有在正确的位置调用钩子,要么是因为可能是有条件地调用它,或者是从非功能组件调用它。