如果我使用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>
您需要更新
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
#