通过使用反应选择映射对象数组来生成选项

Question

我正在使用react-select在我的中创建一个选择选项create-react-app，并尝试映射对象数组以生成选项。我的应用程序加载正常，但当我单击“选择”时，出现此错误：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.

\n\n

我通过 props 将数据传递给组件，该组件工作正常，数据的结构如下：

\n\n

const guests = [\n    {\n        name: 'Kait',\n        plus: true,\n        plusName: 'Kitty'\n    },\n    {\n        name: 'S\xc3\xa9anin',\n        plus: true,\n        plusName: 'Guest'\n    }\n]\n

\n\n

这是选择组件：

\n\n

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

\n\n

关于如何解决这个问题有什么想法吗？

\n

Answer 1

Sung M. Kim\xe2\x80\x98s 的答案是正确的，但是有一种更简单的方法可以使用属性作为标签和值，而无需重新映射选项数组。

\n\n

使用道具getOptionLabel，getOptionValue您可以保留对象映射。两者都接受一个函数，该函数获取单个选项作为参数，并以字符串形式从适当的对象属性返回值或标签。

\n\n

<Select\n    options={this.props.guests}\n    getOptionLabel={(option) => option.name}\n    { /* Couldn\'t find a value in your structure, so I used name again */ }\n    getOptionValue=((option) => option.name}\n    { ... }\n/>\n

\n\n

请参阅文档了解更多信息。

\n