使用react-select设置默认值不起作用

Question

我有一个简单的React组件，它获得一个初始状态：

this.state = {
  currentObject: {
    isYounger: false
  }
}

然后我使用默认值react-select渲染this.state.currentObject.isYounger：

    <Select
      name={"age"}
      value={this.state.currentObject.isYounger}
      onChange={newValue => this.addIsYoungerValue(newValue)}
      options={isYoungerOptions}
    />

由于某种原因，未设置该值。为什么是这样？

Codesandbox

版：

"react-select": "^2.4.2",

Answer 1

这里的问题不在于状态选择，实际问题是标签没有显示。

因此，根据你的addIsYoungerValue函数，你将this.state.currentObject.isYounger的值设置为整个对象。即{ value: true, label: "Younger" }。因此，可以通过以下方式更改初始状态的值来解决问题。

this.state = {
      array: [],
      currentObject: {
        isYounger: { value: true, label: "Younger" }
      }
    };

而hurrey，将显示默认值标签..

Answer 2

你的defaultValue或value必须是物体。在你的情况下像这样：

defaultValue={isYoungerOptions[0]}

要么

this.state = {
   array: [],
   currentObject: {
     isYounger: { value: "true", label: "Younger" }
   }
 };

这里有一个live example。