Question

我正在使用react-select在我的create-react-app中创建一个Select选项，并试图映射到一组对象上以生成选项。我的应用加载正常，但是当我单击“选择”时，出现以下错误：Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {name}). If you meant to render a collection of children, use an array instead.

我正在将数据通过props传递到组件，这很好，并且数据的结构如下：

const guests = [
    {
        name: 'Kait',
        plus: true,
        plusName: 'Kitty'
    },
    {
        name: 'Séanin',
        plus: true,
        plusName: 'Guest'
    }
]

这是Select组件：

<Select
   value={selectedOption}
   onChange={this.handleChange}
   options={
      this.props.guests.map((guest, index) => {
         return {
            label: guest,
            value: guest,
            key: index
         }
      })
   }
/>

关于如何解决此问题的任何想法？

Answer 1

在渲染组件之前，您可能必须先生成数组

const options = this.props.guests.map((guest, index) => {
     return {
        label: guest.name,
        value: guest,
        key: index
     }
})
<Select
   value={selectedOption}
   onChange={this.handleChange}
   options={options}
/>

编辑：

是因为要在标签字段中传递对象。您应该改为传递一个字符串

Answer 2

发生错误是因为标签设置为guest（对象）而不是guest.name（字符串）。

进行以下更改将起作用。

<Select
   value={selectedOption}
   onChange={this.handleChange}
   options={
      this.props.guests.map((guest, index) => {
         return {
-            label: guest,
+            label: guest.name
            value: guest,
            key: index
         }
      })
   }
/>

您可以在下面的沙盒链接中尝试一下。

Answer 3

Sung M. Kim‘s answer是正确的，但是有一种更简便的方法将属性用作标签和值，而无需重新映射选项数组。

使用道具getOptionValue和<Select options={this.props.guests} getOptionLabel={(option) => option.name} { /* Couldn't find a value in your structure, so I used name again */ } getOptionValue=((option) => option.name} { ... } />，您可以保留对象映射。两者都接受一个函数，该函数将单个选项作为参数，并从适当的对象属性作为字符串返回值或标签。

JAVA_OPTS="-Dspring.config.location=application.properties"

有关更多信息，请参见documentation。

通过使用react-select

3 个答案: