为什么在有对象数组可用时 react-select 不输出任何内容？

Question

react-select 似乎没有任何问题。例如，如果对象结构如下：

{ value: 'ocean', label: 'Ocean', color: '#00B8D9', isFixed: true },
{ value: 'blue', label: 'Blue', color: '#0052CC', isDisabled: true },

但为什么它不适用于以下对象结构（不幸的是我不允许更改键名 and/or 结构）：

{ "id": 5, "name": "Pop" },
{ "id": 6, "name": "Electronic/Dance" },
{ "id": 8, "name": "Rock" },

Click on the link to codesandbox to understand the issue

所以问题是我怎样才能使这项工作适用于我的情况。

Answer 1

the following object structure (unfortunately I am not allowed to change the key name and/or structure)

您可以随时使用 .map() to transform the array to another array that has the option structure that react-select recognizes (by default { label: string; value: string }):

const selectOptions = yourOptions.map(o => ({ value: o.id, label: o.name }))

为什么在有对象数组可用时 react-select 不输出任何内容？

Why does react-select not output anything while there is an object array available?

reactjs

react-select