Question

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

ServiceProvider

然后我使用默认值IServiceProvider渲染this.state = { currentObject: { isYounger: false } }：

react-select

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

Codesandbox

版本：

this.state.currentObject.isYounger

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。

Answer 3

还有一种使用 value 作为您的 defaultValue 的方法。就我而言，我使用的是“ id”和“ industry”，而不是“ label”和“ value”

this.state = {
     interested_industries: [{id:"ANY", industry:"ANY"}]
}

在“选择”组件中：-

<Select 
    name="interested_industries"
    options={industries}
    value={interested_industries}
    getOptionLabel={ x => x.id}
    getOptionValue={ x => x.industry}
    onChange={this.handleSelect}
    isMulti
/>

设置默认值与反应选择不起作用

3 个答案: