当我尝试更新创建的对象时，React-select 填充一个空值选项

Question

我正在使用 react-select 根据团队列表为项目选择成员。

选项的格式在文档中指定（带有标签和值的对象数组）

const options = [
     {label: "Sam Altman", value: "61b5b1a4f401d574f5cefab7"},
     {label: "Sam B", value: "87tgb1a4f401d574f5cefab7"},
     {label: "John Altman", value: "9o2nb1a4f401d574f5sd347"},
]

当我尝试在不同的视图中更新值时，就会出现问题。 选择的值包含空选项（我用创建的值自动填充表单）

我目前的选择组件如下：-

<Select
    isMulti
    options={options}
    value={item}
    onChange={(newMembers) =>
    setValues({ ...values, assignedTo: newMembers || [] })
    }
  />

问题仅在更新创建的成员时出现

Answer 1

使用values 代替value。下面是示例代码。

import { useState } from 'react';

import Select from 'react-select';

const options = [
  { label: "Sam Altman", value: "61b5b1a4f401d574f5cefab7" },
  { label: "Sam B", value: "87tgb1a4f401d574f5cefab7" },
  { label: "John Altman", value: "9o2nb1a4f401d574f5sd347" }
];

function App() {

  const [values, setVaues] = useState([]);

  return (
    <div>
      <Select
        isMulti
        values={values}
        onChange={(newMembers) => setVaues({ ...values, assignedTo: newMembers || [] })} options={options}
      />
    </div>
  );
}

export default App;