Unselect MUI Multi select 带初始值

Question

我在 Formik 表单中遇到了 MUI Select（多个）的问题。假设我有一个任务存储在数据库中 taskName，assignTo（人员数组）。现在我正在尝试制作一个可以 update/change 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”。当我点击它时，它还添加了一个“Oliver Hansen”。

Codesandbox

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

Answer 1

来自the Select API page(value prop)：

...

If the value is an object it must have reference equality with the option in order to be selected. If the value is not an object, the string representation must match with the string representation of the option in order to be selected.

savedTask.assignTo 和 personList 具有不同的对象引用，即使它们具有相同的值，因此您必须使用 Array.filter 从中获取 assignTo 的初始值personList 像这样：

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);
  }
});

工作示例：

Unselect MUI Multi select 带初始值

Unselect MUI Multi select with initial value

multi-select

reactjs

material-ui

formik