如果我使用formik，如何在嵌套对象中写入正确的值？
P粉410239819
2023-08-17 16:26:31
<p>给定一个与表单对象中的字段名称匹配的字段数组，我试图编写一个嵌套值，但由于某种原因，formik不知道如何编写嵌套值，这仅适用于顶层的值</p>
<p>我会在评论中留下codesandbox的链接</p>
<pre class="brush:php;toolbar:false;">export default function App() {
const form = useFormik({
initialValues: {
name: "",
login: "",
about: {
age: "",
rank: "",
car: {
name: "",
years: ""
}
}
}
});
const fields = [
{
name: { title: "Your name", fields: {} },
login: { title: "Your login", fields: {} },
about: {
title: "About",
fields: {
age: { title: "Your age", fields: {} },
rank: { title: "Your rank", fields: {} },
car: {
title: "Your car",
fields: {
name: { title: "Car name", fields: {} },
years: { title: "Car years", fields: {} }
}
}
}
}
}
];
const { values, handleChange } = form;
console.log("VALUES", values);
const itemsRender = (item, idx) => {
const key = Object.keys(item).at(-1);
return (
<div key={idx}>
<p>{item[key]?.title}</p>
<input
name={key}
value={values[key]}
onChange={handleChange}
placeholder={item[key].title}
/>
{!isEmpty(item[key]?.fields) && (
<div style={{ marginLeft: 20 }}>
{Object.entries(item[key]?.fields).map(itemsRender)}
</div>
)}
</div>
);
};
return <>{fields.map(itemsRender)}</>;
}</pre>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
您需要更新
name和value属性，以包含嵌套字段的完整路径<input name={`${key}.${nestedFieldName}`} // 包含嵌套字段的路径 value={getIn(values, `${key}.${nestedFieldName}`)} // 使用formik的getIn获取嵌套值 onChange={handleChange} placeholder={fieldObj.title} />您的代码只处理了一层嵌套。
对于更深层次的嵌套，您需要递归地渲染和处理嵌套字段
{Object.entries(item[key]?.fields).map(([nestedFieldName, fieldObj]) => ( <div style={{ marginLeft: 20 }} key={nestedFieldName}> <p>{fieldObj.title}</p> <input name={`${key}.${nestedFieldName}`} value={getIn(values, `${key}.${nestedFieldName}`)} onChange={handleChange} placeholder={fieldObj.title} /> {fieldObj.fields && ( <div style={{ marginLeft: 20 }}> {Object.entries(fieldObj.fields).map(itemsRender)} </div> )} </div> ))}最后，不要直接使用
handleChange处理嵌套字段，而应该使用Formik的setFieldValue来更新嵌套字段的值。您可以从表单对象中访问
setFieldValue：onChange={(e) => { form.setFieldValue(`${key}.${nestedFieldName}`, e.target.value); }}codesandbox