如何以 Formik React 形式初始化动态 MUI 复选框？

Question

所以...我正在使用 Formik 和 MUI 编写一个处理产品图像的表单；每个产品都有不同的元素，其中有一组图像，每个图像都有一个 id、一个路径和一个布尔值：

product: { ...,  images: { id , path , isMain } }

因为我使用相同的表单来创建和更新产品，所以我传递了一个可以为 null 的 prop { product } ... 所以我正在像这样初始化我的值：

<Formik
    initialValues={{
      name: product && product.name ? product.name : "",
      description: product && product.description ? product.description : "",
      price: product && product.price ? product.price : "",
      quantityInStock: product && product.quantityInStock ? product.quantityInStock : "",
      images: product && product.images ? product.images : []
    }}
    onSubmit={(values) => {
      console.log(values);
    }}
    enableReinitialize={true}
  >

问题 1 : 这是正确的方法吗???

问题 2（我真的很苦恼...）：我正在渲染每张带有复选框的图像（对于布尔值 isMain）只应为图像集合选择一个复选框。到目前为止，我确实有复选框并且值在 Formik 的值中更新但是......当我点击复选框时我确实有这个错误：“MUI：一个组件正在改变默认的选中状态初始化后不受控制的 SwitchBase。要抑制此警告，请选择使用受控的 SwitchBase。"

这是我正在做的事情：

{values.images.map((image, index) => {
   const name = `images[${index}].isMain`
   return (
     <div key={index}>
       <Image  src={image.path} alt={"image"} fluid/>
       <Checkbox 
         name={name}
         defaultChecked={values.images[index].isMain}
         onChange={handleChange}
       />
     </div>
   );
  })}

如果我将 defaultChecked 更改为已选中，复选框将保持其原始状态（选中或未选中）但值仍会更新...

任何关于如何初始化这些复选框的值并消除此错误的想法将不胜感激！！！

(奖励： 如果您对如何对复选框进行分组有提示，我也会采纳！）

谢谢...

Answer 1

请使用checked道具。

<Checkbox 
         name={name}
         checked={values.images[index].isMain}
         onChange={handleChange}
/>

如何以 Formik React 形式初始化动态 MUI 复选框？

How to initialize dynamic MUI Checkboxes in Formik React form?

reactjs

material-ui

formik