取消选择 MUI 带初始值的多选

Question

我在 Formik 表单中遇到了 MUI Select (multiple) 问题。 假设我有一个使用taskName、assignTo（员工数组）存储在数据库中的任务。 现在我正在尝试制作一个可以更新/更改assignTo 值的表单。 所以表单得到了initialValues：

const savedTask = {
  id: 1,
  name: "Task A",
  assignTo: [
    {
      id: 1,
      name: "Oliver Hansen",
      age: 32
    }
  ]
};

和人员列表

const personList = [
  {
    id: 1,
    name: "Oliver Hansen",
    age: 32
  },
  {
    id: 2,
    name: "Van Henry",
    age: 25
  },
  {
    id: 3,
    name: "Oliver",
    age: 27
  }
];

问题是我无法在更新表单中取消选择“Oliver Hansen”。当我点击它时，它还添加了一个“奥利弗汉森”。

Codesandbox

我是不是执行错了，或者这就是 formik setFieldValues 的行为方式？

Answer 1

来自the Select API page(value prop)：

...

如果值是一个对象，它必须与 选项以便被选中。如果值不是对象，则 字符串表示必须与 选项以便被选中。

savedTask.assignTo 和 personList 具有不同的对象引用，即使它们具有相同的值，因此您必须使用 Array.filter 才能从 personList 中获得 assignTo 的初始值，如下所示：

const initValues = { 
  ...savedTask, 
  assignTo: personList.filter(person => savedTask.assignTo.some(obj => obj.id === person.id))
};

const formik = useFormik({
  initialValues: initValues,
  onSubmit: (values) => {
    console.log("values submit ", values);
  }
});

工作示例：