如何使用字段数组删除formik值

Question

使用字段数组时我们如何删除 formik 值。因此，当我删除它时，它会从 UI 中删除，但保留在 formik 值中。我可以直接编辑/修改 formik 值吗？我是新来的。谢谢

{
 Client:
 Phone: [
  {
    PhoneNumber:"",
    PhoneType:""
  }
]
}

我可以从状态中删除该事件，但 formik 值仍然保留这些值。

 const Phone = ({ title, binding }) => {
 const [phones, setPhones] = useState([])
 return (

<Fragment>
  <Grid item xs={12} md={6}>
    <SectionField
      title={title}
      name={binding + `.Phone.PhoneNumber`}
      required
      label="Phone"
      fullWidth
      type="tel"
      component={TextField}
    />
  </Grid>
  <Grid item xs={12} sm={3}>
    <SectionField
      title={title}
      name={binding + `.Phone.PhoneType`}
      required
      defaultValue={{ label: "", value: "" }}
      label="Phone Type"
      suggestions={phoneTypes}
      component={MuiReactSelect}
    />
  </Grid>
  <IconButton onClick={() => {
    setPhones(currentValue => [...currentValue, {
      id: generate(),
      PhoneNumber: "",
      PhoneType: ""
    }])
  }}>
    <AddBoxIcon fontSize="large" />
  </IconButton>
  {phones.map((p, index) => (
    <Fragment key={p.id}>
      <Grid item xs={12} md={5}>
        <SectionField
          title={title}
          name={binding + `.Phone[${index}].PhoneNumber`}
          required
          label="Phone"
          fullWidth
          type="tel"
          component={TextField}
        />
        <ErrorMessage name={`Client.Phone.${index}.PhoneNumber`} /><br />
      </Grid>
      <Grid item xs={12} sm={3}>
        <SectionField
          title={title}
          name={binding + `.Phone[${index}].PhoneType`}
          required
          defaultValue={{ label: "", value: "" }}
          label="Phone Type"
          suggestions={phoneTypes}
          component={MuiReactSelect}
        />
      </Grid>
      <IconButton onClick={() => {
        setPhones(currentPhone =>
          currentPhone.filter(x => x.id !== p.id))
      }}>
        <RemoveCircleIcon fontSize="large" />
      </IconButton>
    </Fragment>
  ))}
</Fragment>


)
};export default Phone;


 Formik values:
 ======================================================
  "Phone": {
    "0": {
    "PhoneNumber": "8578882942",
    "PhoneType": "Home"
   },
     "PhoneNumber": "8578882942",
     "PhoneType": "Home"
    },

Answer 1

当我想从 Ui 中删除该元素但它在 formik 中的值保留在那里时，我遇到了同样的不便。我所做的是使用formik的setFieldValue: (field: string, value: any, ShouldValidate?: boolean) => void

假设您正在使用一个按钮从 UI 中删除该元素，因此我在其 onClick 属性中添加了一个额外的内容，如下所示：

  //formik.setFieldValue({name of the element that you want to delete})
  onClick = {()=>{
              //whatever work you need to do for removing it from ui

              //then

             //formik.setFieldValue({name of the element that you want to delete})

             formik.setFieldValue(index)
             // here index was the name of variable that i used for that element

         }}

然后在 formik 的 useFormik() 钩子中我做了这样的事情：

const formik = useFormik({
  initialValues: {
   //your initial values
  },
  onSubmit: (values) => {
   // your onSubmit
  },
  setFieldValue: (field) => {
     delete values.field;
  },
});

抱歉，我知道这个答案已经晚了，但我希望它能帮助别人