React下拉框选中值无法显示在标题，报错devices.map is not a function

一、标题<h1>Aircraft {}</h1>的内容填充 #

你需要新增一个单独的状态来存储选中的设备ID，而不是直接填uniqueDeviceIds或devices：

• uniqueDeviceIds是所有唯一设备ID的数组，直接放入会显示整个数组内容，不符合“显示选中值”的需求；
• devices是接口返回的原始设备数据数组，也不适合直接显示在标题里。

先添加选中状态：

const [selectedDeviceId, setSelectedDeviceId] = useState('');

之后标题里填充这个状态：

<h1>Aircraft {selectedDeviceId}</h1>

二、解决devices.map is not a function错误 #

这个错误的核心原因是：你在handleChange里把原本是数组类型的devices改成了字符串类型（e.target.value是下拉框选中的字符串值），后续useMemo中执行devices.map时，字符串没有map方法，因此报错。

修复步骤如下：

1. 修正handleChange逻辑：不要修改devices状态，转而更新新增的selectedDeviceId状态，同时去掉不必要的e.preventDefault()（下拉框的change事件不需要阻止默认行为）：

const handleChange = (e) => {
  setSelectedDeviceId(e.target.value);
};

2. 修正下拉框的value属性：应该绑定选中状态selectedDeviceId，而不是数组uniqueDeviceIds：

<select
  value={selectedDeviceId}
  onChange={handleChange}
>

3. （可选优化）给下拉框添加默认占位选项，提升交互体验：

<option value="" disabled>选择一个设备</option>

完整修正后的代码 #

import React, { useState, useEffect, useMemo } from "react";

const Devdropdown = () => {
  const [devices, setDevices] = useState([]);
  const [selectedDeviceId, setSelectedDeviceId] = useState('');
  const url = "..";

  useEffect(() => {
    async function getDevices() {
      const response = await fetch(url);
      const body = await response.json();
      setDevices(body.data);
    }
    getDevices();
  }, []);

  const handleChange = (e) => {
    setSelectedDeviceId(e.target.value);
  };

  const uniqueDeviceIds = useMemo(
    () => Array.from(new Set(devices.map((device) => device.device_id))),
    [devices]
  );

  console.log(uniqueDeviceIds);
  return (
    <div>
      <h1>Aircraft {selectedDeviceId}</h1>
      <select
        value={selectedDeviceId}
        onChange={handleChange}
      >
        <option value="" disabled>选择一个设备</option>
        {uniqueDeviceIds.map((deviceId) => (
          <option key={deviceId} value={deviceId}>{deviceId}</option>
        ))}
      </select>
    </div>
  );
};

export default Devdropdown;

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