当我尝试更新创建的 object 时，React-select 填充 null 值选项

Question

I'm using react-select for choosing members for a project based on a team list.

The format of the options is as specified in the docs (array of objects with label and value)

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

The problem arises when I'm trying to update the values in a different view. The selected values contains null option (where I auto populate the form with the created values )

My current select component is as follows: -

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

The problem only arises while updating the created members

Answer 1

use values instead of value . below is sample code.

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;