React中如何用filter和map将API数据转为单选按钮

错误原因分析 #

你的代码存在两个核心问题：

1. filter返回的是数组，你遍历的是过滤后的CarProperty对象，但直接访问data.values.id是错误的——data.values是一个数组，需要再对它进行遍历。
2. 单选按钮缺少统一的name属性，无法实现同组互斥选择；同时用index作为key不够严谨，建议使用数据本身的唯一id。

另外，因为key是唯一标识，用find代替filter更高效（直接返回匹配的单个对象，而非数组）。

修正后的代码 #

// 先找到key为"Brand"的属性对象
const brandProperty = carProperties?.find(property => property.key === "Brand");

// 生成单选按钮组
return (
  <div>
    {brandProperty?.values.map((value) => (
      <div key={value.id}>
        <Form.Check>
          <Form.Check.Input
            type="radio"
            id={`brand-${value.id}`}
            name="car-brand" // 统一name，保证同组单选互斥
            value={value.name}
          />
          <Form.Check.Label className="form-check-label">
            {value.name}
          </Form.Check.Label>
        </Form.Check>
      </div>
    ))}
  </div>
);

扩展：支持复选框场景 #

如果需要为Color这类属性生成复选框，只需修改type并调整name（支持多选的命名形式）：

const colorProperty = carProperties?.find(property => property.key === "Color");

return (
  <div>
    {colorProperty?.values.map((value) => (
      <div key={value.id}>
        <Form.Check>
          <Form.Check.Input
            type="checkbox"
            id={`color-${value.id}`}
            name="car-colors"
            value={value.name}
          />
          <Form.Check.Label className="form-check-label">
            {value.name}
          </Form.Check.Label>
        </Form.Check>
      </div>
    ))}
  </div>
);

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