JavaScript对象解构：处理数据库返回JSON对象获取姓名数组供下拉选择使用

云原生阿岚

2026-10-6

实现方案

你可以在接口请求成功后直接通过对象解构+数组转换得到目标格式的姓名数组，数据转换仅执行1次，避免渲染阶段重复处理属性，效率更高，具体实现如下：

1. 接口层直接处理数据格式

请求成功后直接对返回数组的每一项做对象解构取出name字段，同时转大写，返回业务直接可用的字符串数组：

// fetch版本
export const fetchNames = async () =>{
  try{
    const response = await fetch(`http://localhost:5000/towns`);
    const rawData = await response.json();
    // 对每一项对象解构取name，直接转大写返回
    return rawData.map(({ name = '' }) => name.toUpperCase());
  }catch(error){
    console.error('请求出错:', error);
    return []; // 出错返回空数组，避免后续渲染报错
  } 
}

// axios版本（注意axios返回的响应体在data字段下）
export const fetchNames = async() => {
  try {
    const res = await axios.get("http://localhost:5000/names");  
    return res.data.map(({ name = '' }) => name.toUpperCase());
  } catch (error) {
    console.error('请求出错:', error);
    return [];
  }
}

2. 组件内使用逻辑

state中直接存储纯姓名数组，渲染时无需再做属性读取：

const [fetchedNames, setFetchedNames] = useState([]);

useEffect(()=>{
  const fetchApi = async () =>{
    const names = await fetchNames();
    setFetchedNames(names);
  }
  fetchApi();
},[]);

// 渲染下拉选项逻辑更简洁
{fetchedNames.map((name,i) => (
  <option key={i} value={name}>{name}</option>
))}