如果我使用formik，如何在嵌套物件中寫入正確的值？

Question

給定一個與表單物件中的字段名稱匹配的字段數組，我試圖編寫一個嵌套值，但由於某種原因，formik不知道如何編寫嵌套值，這僅適用於頂層的值< ;/p>

我會在評論中留下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 (
      <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)}</>;
}

Answer 1

您需要更新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

#