React.js获取API动态填充下拉列表选中值并显示，解决map报错问题

• 状态职责混淆：races状态被同时用于存储接口返回的全量种族选项数组、下拉框选中值。触发选择操作时，setRaces(e.target.value)会把原本的数组覆盖为字符串类型的选中值，字符串不存在map方法，因此触发TypeError: races.map is not a function报错。
• 下拉框绑定错误：<select>的value属性绑定了全量数组races，不符合表单控件的绑定规则。
• 取值逻辑错误：<h1>中尝试读取races.name，后续races被覆盖为字符串后该属性不存在，导致无法正常展示选中值。

核心逻辑是拆分状态职责，新增独立的selectedRace状态专门存储下拉框选中值，races仅用于存储接口返回的全量选项列表，不会在选择操作中被修改。

import React, { useState, useEffect } from 'react';

const App = () => {
  // 存储接口返回的全量种族选项列表
  const [races, setRaces] = useState([]);
  // 存储下拉框选中的种族名称
  const [selectedRace, setSelectedRace] = useState('');

  useEffect(() => {
    fetchRacesHandler();
  }, []);

  async function fetchRacesHandler() {
    const response = await fetch('https://api.open5e.com/races');
    const data = await response.json();
    const raceList = data.results || [];
    setRaces(raceList);
    // 可选配置：默认选中第一个选项
    if (raceList.length) {
      setSelectedRace(raceList[0].name);
    }
  };

  return (
    <>
      <select 
        value={selectedRace} 
        onChange={e => setSelectedRace(e.target.value)}
      >
        {races.map((item, index) => (
          <option
            key={index}
            value={item.name}
          >
            {item.name}
          </option>
        ))}
      </select>
      <h1>{selectedRace}</h1>
    </>
  );
};

export default App;

扩展说明 #

如果需要获取选中项的完整对象而非仅名称，可以将option的value绑定为数据的唯一标识字段（比如item.slug），选中后通过races.find(item => item.slug === selectedRace)即可匹配到完整的选中项数据。

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