给定一个与表单对象中的字段名称匹配的字段数组，我试图编写一个嵌套值，但由于某种原因，formik不知道如何编写嵌套值，这仅适用于顶层的值
我会在评论中留下codesandbox的链接
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 ( {item[key]?.title}
{!isEmpty(item[key]?.fields) && ( {Object.entries(item[key]?.fields).map(itemsRender)} )} ); }; return <>{fields.map(itemsRender)}; }
您需要更新
name和value属性，以包含嵌套字段的完整路径您的代码只处理了一层嵌套。
对于更深层次的嵌套，您需要递归地渲染和处理嵌套字段
{Object.entries(item[key]?.fields).map(([nestedFieldName, fieldObj]) => ( {Object.entries(fieldObj.fields).map(itemsRender)} )} ))}{fieldObj.title}
{fieldObj.fields && (最后，不要直接使用
handleChange处理嵌套字段，而应该使用Formik的setFieldValue来更新嵌套字段的值。您可以从表单对象中访问
setFieldValue：onChange={(e) => { form.setFieldValue(`${key}.${nestedFieldName}`, e.target.value); }}codesandbox