React中如何基于JSON数据使用ComboBox？含数据格式转换需求

你可以直接用JavaScript的map()方法提取原始数据里的label字段，快速转换成需要的字符串数组。

基础转换方法 #

假设你的原始数据是这样的：

const jsonData = [
  {"value": 1, "label": "Monday"},
  {"value": 2, "label": "Tuesday"},
  {"value": 3, "label": "Wednesday"},
  {"value": 4, "label": "Thursday"},
  {"value": 5, "label": "Friday"},
  {"value": 6, "label": "Saturday"},
  {"value": 7, "label": "Sunday"}
];

执行map()转换：

const stringArray = jsonData.map(item => item.label);
// 结果就是 ['Monday', 'Tuesday', 'Wednesday', ..., 'Sunday']

完整React组件示例（原生select） #

如果用原生的HTML select作为ComboBox：

import React, { useState } from 'react';

function WeekdayComboBox() {
  const jsonData = [
    {"value": 1, "label": "Monday"},
    {"value": 2, "label": "Tuesday"},
    {"value": 3, "label": "Wednesday"},
    {"value": 4, "label": "Thursday"},
    {"value": 5, "label": "Friday"},
    {"value": 6, "label": "Saturday"},
    {"value": 7, "label": "Sunday"}
  ];

  // 转换为字符串数组
  const weekdayOptions = jsonData.map(item => item.label);
  const [selectedDay, setSelectedDay] = useState('');

  return (
    <div>
      <label>选择星期：</label>
      <select
        value={selectedDay}
        onChange={(e) => setSelectedDay(e.target.value)}
        style={{ padding: '8px', fontSize: '14px' }}
      >
        {/* 渲染选项 */}
        {weekdayOptions.map((day, index) => (
          <option key={index} value={day}>
            {day}
          </option>
        ))}
      </select>
    </div>
  );
}

export default WeekdayComboBox;

额外提示：第三方组件无需转换 #

很多React UI库的ComboBox/Select组件（比如Ant Design、Material-UI）支持直接传入带value和label的原始数组，不用手动转换。比如Ant Design的Select：

import { Select } from 'antd';

function AntdWeekdaySelect() {
  const jsonData = [
    {"value": 1, "label": "Monday"},
    {"value": 2, "label": "Tuesday"}
    // 其他数据...
  ];

  return (
    <Select placeholder="选择星期" style={{ width: 200 }}>
      {jsonData.map(item => (
        <Select.Option key={item.value} value={item.value}>
          {item.label}
        </Select.Option>
      ))}
    </Select>
  );
}

容错处理 #

如果你的原始数据可能为空或者未定义，可以加个可选链和默认值避免报错：

const weekdayOptions = jsonData?.map(item => item.label) || [];

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