React中<option>标签不显示的原因及修复方案

问题描述 #

我是React初学者，正在学习React相关知识。我做了一个简单的选择器页面，用来选择国家和语言并展示结果，页面包含2个select组件和2个展示结果的标签。但点击“Select Country”时，预期显示的9个选项（如'USA'、'Germany'等）实际没有显示，请问原因是什么？该怎么修复？

代码示例 #

DropDown.js

import React from "react";

function Dropdown({ options, labelText, onChange }) {
  console.log(options);
  return (
    <div className="elementSet">
      <select data-testid="dropdown" onChange={onChange}>
        <option value={options} key={labelText} disabled>{labelText}</option>
        {options.map((value) => {
          <option value={value}>
            {value}
          </option>
        })}

      </select>
    </div>
  );
}

export default Dropdown;

App.js

import React, { useState } from "react";
import Dropdown from "./DropDown";

const title = "Employee Information";

function App() {

    const [country, setCountry] = useState('');
    const [language, setLanguage] = useState('');

    return (
        <div>
            <h8k-navbar header={title}></h8k-navbar>
            <div className="layout-row align-items-centre justify-content-center mt-50">
                <section className="layout-column">
                    <div data-testid="country-options">
                        <Dropdown options={countryOptions} labelText={'Select Country'} onChange={(e) => setCountry(e.target.value)} />
                    </div >
                    <div data-testid="language-options">
                        <Dropdown options={languageOptions} labelText={'Select Language'} onChange={(e) => setLanguage(e.target.value)} />
                    </div>
                    <label className="mt-50 text-align-center">
                        Final Selections:
                    </label>
                    <label className="mt-10 finalText" data-testid="country-selected">
                        Country Selected: {`${country}`}
                    </label>
                    <label className="mt-10 finalText" data-testid="language-selected">
                        Language Selected: {`${language}`}
                    </label>
                </section>
            </div>
        </div>
    );
}

const countryOptions = [
    'USA',
    'Germany',
    'France',
    'Canada',
    'India',
    'Poland',
    'Japan',
    'Spain',
    'Australia'
];

const languageOptions = [
    'English',
    'Spanish',
    'French',
    'German'
]

export default App;

问题原因 #

1. map函数未返回JSX元素：在Dropdown组件中，options.map()的回调函数使用大括号{}但未显式返回<option>元素，导致map执行后没有生成任何子组件。
2. 默认option的value错误：第一个disabled的option把value设为了options数组，会导致选中值异常，应该设置为空字符串或者不指定value。
3. 缺少key属性：map生成的<option>未添加key属性，不符合React列表渲染要求，同时会触发控制台警告。

修复方案 #

修改DropDown.js中的代码：

import React from "react";

function Dropdown({ options, labelText, onChange }) {
  console.log(options);
  return (
    <div className="elementSet">
      <select data-testid="dropdown" onChange={onChange}>
        {/* 修正默认option的value，避免选中值异常 */}
        <option value="" key={labelText} disabled>{labelText}</option>
        {/* 用小括号让箭头函数自动返回JSX元素，同时添加key属性 */}
        {options.map((value) => (
          <option key={value} value={value}>
            {value}
          </option>
        ))}
      </select>
    </div>
  );
}

export default Dropdown;

关键修改说明 #

• map回调返回元素：将map回调的大括号{}替换为小括号()，箭头函数会自动返回括号内的JSX；也可以在大括号内添加return语句实现相同效果。
• 添加key属性：给每个生成的<option>添加key={value}，确保React能正确识别列表项，避免渲染警告。
• 修正默认option的value：将value={options}改为value=""，确保初始选中状态正确，不会传递数组作为选中值。

修改完成后，下拉菜单就能正常显示所有选项，选择后也能正确更新状态并展示结果。

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