React Hooks应用下拉选择框默认值无法显示问题求助

问题根源 #

你设置的defaultValue是"Select Position"，但这个值完全不在下拉选项列表里——你的positionType数组里全是球员位置选项，没有对应这个默认文本的<option>标签，浏览器找不到匹配的选项，自然无法显示它。另外那个空依赖的useEffect完全多余，初始化的defaultValue已经是目标值，没必要重复设置；select标签上用defaultValue作为key也毫无意义，反而可能引发不必要的组件重渲染。

修复方案 #

把"Select Position"作为第一个占位选项添加到下拉列表中，同时调整defaultValue匹配这个选项的value，具体代码如下：

import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const [defaultValue, setDefaultValue] = useState("");
  const [positionType, setPositionType] = useState([
    "Goal Keeper",
    "Striker",
    "Attacking Midfielder",
    "Right Midfielder",
    "Defending Midfielder",
    "Left Midfielder",
    "Center Back",
    "Right Fullback",
    "Left Fullback"
  ]);

  const handlePositionTypeChange = (e) => {
    const selectedValue = e.target.value;
    console.log(positionType[selectedValue]);
    // 若需要更新选中状态，可在这里设置defaultValue
    // setDefaultValue(selectedValue);
  };
  
  return (
    <div className="App">
      <label>Position</label>
      <select
        defaultValue={defaultValue}
        onChange={handlePositionTypeChange}
        className="browser-default custom-select"
      >
        {/* 添加默认占位选项，禁用防止用户选中 */}
        <option value="" disabled>Select Position</option>
        {positionType.map((position, key) => (
          <option key={key} value={key}>{position}</option>
        ))}
      </select>
    </div>
  );
}

核心调整点 #

• 新增<option value="" disabled>Select Position</option>作为默认占位项，value设为空字符串和defaultValue初始值对应，disabled属性阻止用户选中该选项。
• 移除了冗余的useEffect和无意义的key属性。
• 给每个option加上key（使用map的索引，因选项固定无动态变更，这种方式可行），符合React列表渲染规范。

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