使用 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}
    />

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

代码沙盒

版本：

"react-select": "^2.4.2",

原文由 a7dc 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

快点，将显示默认值标签。

原文由 Dhara Vihol 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您的 defaultValue 或 value 必须是对象。在你的情况下是这样的：

 defaultValue={isYoungerOptions[0]}

或者

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

这是一个 活生生的例子。

原文由 Laura 发布，翻译遵循 CC BY-SA 4.0 许可协议