从另一个组件调用 react-select 时 defaultValue 不起作用

Question

我正在将选项列表从父组件 App.js 发送到子组件 Dropdown.js，我在 Select 中呈现它们。然后，我想在 Select 中设置默认值，以便在打开父页面时选择我定义的选项之一。

我将其设置为 defaultValue={{ value: "strawberry", label: "Strawberry" }}，如果我作为父级在 Dropdown.js 中执行所有操作，它会起作用，但如果我作为子级调用 Dropdown.js组件，突然 defaultValue 不再工作，它将保持空白。

这是我开发的codesandbox供参考：

codesandbox

Answer 1

因为您正在设置 value，所以它将覆盖 defaultValue。

只需声明 selectedOption 为您想要的默认值：

  const [selectedOption, setSelectedOption] = useState({
    value: "strawberry",
    label: "Strawberry"
  });

或：

  const [selectedOption, setSelectedOption] = useState(options[1]);

https://codesandbox.io/s/crazy-panini-wgds2?file=/src/components/Dropdown/Dropdown.js:244-309

从另一个组件调用 react-select 时 defaultValue 不起作用

defaultValue not working when calling react-select from another component

reactjs

react-select