React中过滤code以CD_开头的JSON数据并赋值给state实现下拉菜单

• 异步逻辑处理错误：你调用后端接口返回的是Promise对象，没有等待异步请求完成就直接操作数据，这是触发Promise相关报错的直接原因。
• 数据结构操作错误：接口返回的根data是对象，filter是数组专属方法，直接对根data调用filter会触发类型报错，实际需要处理的是data.response数组字段。
• useState使用错误：你在filter遍历过程中反复调用setCdValue，且将startsWith返回的布尔值赋值给初始类型为数组的cdValue，完全不符合需求逻辑。
• 变量命名冲突：你将过滤结果赋值给名为data的常量，和接口返回的根数据重名，会触发作用域相关报错。

首先用useEffect处理异步请求，拿到响应后先过滤所有code以CD_开头的条目，再拆分CD_type和CD_name两类数据分别存入两个state，最后遍历state渲染下拉框即可，参考代码如下：

import { useState, useEffect } from 'react';

// 替换为你实际的后端接口调用方法
const fetchBackendData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        "color": "red",
        "value": "#f00",
        "response": [
          {"code": "CD_type","name": "sampleText_1"},
          {"code": "RS_type","name": "sampleText_1"},
          {"code": "AD_name","name": "sampleText_1"},
          {"code": "RS_type","name": "sampleText_1"},
          {"code": "AD_name","name": "sampleText_1"},
          {"code": "CD_name","name": "sampleText_1"},
          {"code": "CD_name","name": "sampleText_1"},
          {"code": "RS_type","name": "sampleText_1"},
          {"code": "AD_name","name": "sampleText_1"},
          {"code": "CD_type","name": "sampleText_2"},
          {"code": "CD_type","name": "sampleText_3"},
          {"code": "CD_name","name": "sampleText_2"},
          {"code": "RS_type","name": "sampleText_1"},
          {"code": "AD_name","name": "sampleText_1"},
          {"code": "CD_name","name": "sampleText_1"},
          {"code": "CD_name","name": "sampleText_1"},
          {"code": "CD_type","name": "sampleText_4"},
          {"code": "CD_name","name": "sampleText_3"},
          {"code": "CD_type","name": "sampleText_5"}
        ]
      })
    }, 100)
  })
}

function YourComponent() {
  // 两个state分别存储CD_type和CD_name类数据
  const [typeList, setTypeList] = useState([]);
  const [nameList, setNameList] = useState([]);

  useEffect(() => {
    const getData = async () => {
      // 等待异步请求完成再处理数据
      const res = await fetchBackendData();
      // 过滤所有CD_开头的条目
      const cdList = res.response.filter(item => item.code.startsWith('CD_'));
      // 拆分两类数据
      const types = cdList.filter(item => item.code === 'CD_type');
      const names = cdList.filter(item => item.code === 'CD_name');
      // 存入对应state
      setTypeList(types);
      setNameList(names);
    }
    getData();
  }, [])

  return (
    <div>
      {/* 类型下拉选择器 */}
      <select>
        {typeList.map((item, idx) => (
          <option key={idx} value={item.name}>{item.name}</option>
        ))}
      </select>
      {/* 名称下拉选择器 */}
      <select>
        {nameList.map((item, idx) => (
          <option key={idx} value={item.name}>{item.name}</option>
        ))}
      </select>
    </div>
  )
}

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