React-Select组件无法显示colors数组内的下拉选项如何解决？

问题原因 #

• 你给react-select的options属性传入了错误的值：colors本身是数组类型，不存在value属性，colors.value实际为undefined，所以下拉没有可展示的选项
• react-select默认要求选项数组的每个对象包含value（选项实际值）和label（下拉展示文本）两个字段，你当前数组里的展示字段是color，和默认要求不匹配

修正后代码（已适配state控制需求） #

import React, { useState } from 'react'
import 'bootstrap/dist/css/bootstrap.css'
import { Navbar, Container, Nav } from 'react-bootstrap'
import Select from 'react-select'

const Header = () => {
    // 声明state控制下拉选中项，可直接用于操控Header内其他元素
    const [selectedColor, setSelectedColor] = useState(null)
    const colors = [
        {
            value: 1,
            color: "Blue"
        },
        {
            value: 2,
            color: "Red"
        },
        {
            value: 3,
            color: "Green"
        },
        {
            value: 4,
            color: "Orange"
        },
    ];

    return (
        <div>
            <Navbar bg="light" expand="lg">
                <Container>
                    <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
                    <Navbar.Toggle aria-controls="basic-navbar-nav" />
                    <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="me-auto">
                        <Nav.Link href="#home">Home</Nav.Link>
                        <Nav.Link href="#link">About</Nav.Link>
                        <Nav.Link href="#link">Contact</Nav.Link>
                        <Nav.Link href="#link">blog</Nav.Link>
                    </Nav>
                    {/* 修正配置：传入完整数组、指定展示和取值字段、绑定state */}
                    <Select 
                        options={colors}
                        getOptionLabel={option => option.color}
                        getOptionValue={option => option.value}
                        value={selectedColor}
                        onChange={val => setSelectedColor(val)}
                    />
                    </Navbar.Collapse>
                </Container>
            </Navbar>
        </div>
    )
}

export default Header

修改后下拉菜单会正常列出Blue、Red、Green、Orange四个选项，选中的值会同步存储在selectedColor变量中，可直接用来操控Header组件内的其他元素。

内容的提问来源于stack exchange，提问作者Theophilus