使用react-select设置默认值无效

Question

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

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

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

Translated text:

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

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

由于某些原因，该值未设置。为什么会这样？ Codesandbox 版本： "react-select": "^2.4.2",

- a7dc

---

请问您正在使用的 react-select 版本是哪个？ - Dhara Vihol

感谢@DharaVihol，我已经更新了原帖的版本。 - a7dc

看起来你遇到了问题，因为你试图设置“布尔”值。你能否尝试使用字符串值，这样我们就可以理解根本原因，并帮助解决问题。@A7DC - Dhara Vihol

您还可以提供 defaultValue 属性。如此处所述。 https://github.com/JedWatson/react-select - Dhara Vihol

我已经尝试过使用 defaultValue={isYoungerOptions[0].value} 但是它不起作用。 - a7dc

Answer 1

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

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

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

好消息是，默认值标签将会显示。

- Dhara Vihol

Answer 2

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

defaultValue={isYoungerOptions[0]}

或者。

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

这里有一个实时示例。

- Laura

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
/>

- Tron

---

谢谢，你帮我省了好几个小时的烦恼！ - numediaweb

Answer 4

defaultValue属性仅在组件挂载/首次渲染时起作用。

- Quyền Sinh Trần