Select组件无法生成预期选项数组？求可行解决方案

核心问题 #

你的代码存在变量名冲突：原始数据数组和state变量都命名为haulTypes，导致useEffect中访问的是state的初始空数组[]，而非你定义的['Long Haul', 'Short Haul']，最终reduce处理空数组后只能得到默认的"Select Type"选项。

可行解决方案 #

方案1：修复变量名冲突（保留useEffect）

将原始数据数组和state变量的名称区分开，确保useEffect能正确读取到原始数据：

// 原始数据数组重命名，避免与state冲突
const rawHaulTypes = ['Long Haul', 'Short Haul'];

// state变量命名更清晰，明确存储的是选项格式的数据
const [haulTypeOptions, setHaulTypeOptions] = useState([]);

useEffect(() => {
  const formattedOptions = rawHaulTypes.reduce(
    (acc, item, index) => [
      ...acc,
      { key: index + 1, label: item, value: item },
    ],
    [{ key: 0, label: "Select Type", value: "" }]
  );
  setHaulTypeOptions(formattedOptions);
}, []); // 依赖为空数组，因原始数据是静态的，仅执行一次

方案2：直接计算选项（无需useEffect和state）

由于原始数据是静态的，没必要用useEffect和state存储，直接在组件内计算即可：

const rawHaulTypes = ['Long Haul', 'Short Haul'];

// 直接生成选项数组，包含默认选项和转换后的原始数据
const haulTypeOptions = [
  { key: 0, label: "Select Type", value: "" },
  ...rawHaulTypes.map((item, index) => ({
    key: index + 1,
    label: item,
    value: item
  }))
];

方案3：用useMemo缓存（适配原始数据动态变化场景）

如果原始数据可能动态更新，用useMemo缓存计算结果，避免不必要的重渲染：

import { useMemo } from 'react';

const rawHaulTypes = ['Long Haul', 'Short Haul']; // 若该数组是props或动态生成，可作为依赖

const haulTypeOptions = useMemo(() => {
  return [
    { key: 0, label: "Select Type", value: "" },
    ...rawHaulTypes.map((item, index) => ({
      key: index + 1,
      label: item,
      value: item
    }))
  ];
}, [rawHaulTypes]); // 依赖原始数据，数据变化时重新计算

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