Formik表单不更新与onclick

Question

我有一个自定义事件处理程序(当单击按钮时)，它根据下拉选择在嵌套数组中注入数据。事件处理程序添加数据后，表单无法正确更新。对表单的任何其他输入调用任何其他事件处理程序都将触发表单更新。数据设置正确，但表单在初始onClick事件后没有正确更新(见代码)

我设置了enableReinitialize set

https://codesandbox.io/s/updateissue-fy72h

import { useEffect, useState } from "react";
import { Formik, Form, Field, FieldArray, TextField } from "formik";
export default function Design() {
const q = {
questions: ["a", "b", "c", "d"],
selectedLanguage: "nl",
};
const [questionnaire, setQuestionnaire] = useState(q);
function addLanguageValue() {
questionnaire.questions.push(questionnaire.selectedLanguage);
setQuestionnaire(questionnaire);
}
return (
<div>
<Formik
initialValues={questionnaire}
enableReinitialize
onSubmit={() => {}}
>
{({ values, handleChange }) => (
<Form>
<div>
<Field as="select" name="selectedLanguage">
<option value="fr">French</option>
<option value="nl">Dutch</option>
<option value="en">English</option>
</Field>
<button
type="button"
className="bg-gradient-to-b"
onClick={(e) => {
addLanguageValue(values);
}}
>
Add language
</button>
</div>
<div>
<FieldArray
name="questions"
render={(rootHelper) => (
<div>
{values.questions.map((value, j) => {
return <div>{value}</div>;
})}
</div>
)}
/>
</div>
</Form>
)}
</Formik>

Answer 1

您正在改变状态对象，这会导致问题。如果您在addLanguageValue中创建一个新对象，它将按预期工作:

function addLanguageValue() {
setQuestionnaire({
...questionnaire,
questions: [...questionnaire.questions, questionnaire.selectedLanguage]
});
}

沙箱例子

Answer 2

因为onClick函数不会导致状态的重新呈现，你可以使用以下的工作/技巧，通过使用一个无攻击的函数setStatus来触发重新呈现:

<button
type='button'
className='bg-gradient-to-b'
onClick={e => {
addLanguageValue(values);
//Used for rerendering.
props.setStatus('Adding language!');
}}
>
Add language
</button>;