React中如何基于Axios获取的数据渲染去重下拉列表？

核心问题原因 #

你把Set对象直接存入了industryList状态，但Set不是数组，没有map方法，所以React无法遍历它生成选项。另外，setIndustryList是异步操作，执行后立刻console.log(industryList)拿不到最新值，这是React状态更新的正常机制。

修复步骤 #

1. 将Set转换为数组：在存入状态前，把去重后的Set转成数组，这样就能用map遍历。可以用Array.from()或者扩展运算符[...Set]实现。
2. 优化状态更新后的调试：如果要查看更新后的industryList，可以用useEffect监听状态变化，或者在组件渲染时打印。
3. 优化key值：不要用indexOf作为key，去重后的列表项本身是唯一的，直接用item作为key更可靠。

修改后的代码 #

import React, {useState, useEffect} from 'react'
import db from './db.js'

function App() {

  const [industryData, setIndustryData] = useState([])
  const [industryList, setIndustryList] = useState([])

  const getData= async()=>{
      const response = await db.get('/getTable/industries')
      const data =  response.data;
      setIndustryData(data)

      // 一步完成字段提取、去重并转成数组
      const uniqueIndustries = [...new Set(data.map(row => row.industry))]
      setIndustryList(uniqueIndustries)
   }

  useEffect(()=>{
    getData()
  },[])

  // 监听industryList变化，查看最新值
  useEffect(() => {
    console.log('更新后的industryList:', industryList)
  }, [industryList])

    return (
      <div className="App">
        {/* 修复后的下拉列表 */}
        <select>
          {industryList.map(item=>(
            <option key={item}>{item}</option>
          ))}
        </select>

        {/* 原始数据的下拉列表 */}
        <select>
          {industryData.map(item=>(
            <option key={item.industry}>{item.industry}</option>
          ))}
        </select>
    </div>
  );
}

export default App;

额外说明 #

• 去掉了getData函数里多余的req,res参数，这是前端函数，不需要后端接口的参数。
• 用data.map(row => row.industry)替代forEach+push，代码更简洁。
• 通过[...new Set(...)])一步完成提取字段、去重、转数组的操作，减少中间变量。

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