React/Shopify：如何遍历数组Props实现ChoiceList组件选项

你的代码无法运行主要有两个问题：

• 使用了forEach遍历data，但forEach没有返回值，执行后会得到undefined，导致choices数组实际是[undefined]，组件无法渲染有效选项。
• 每个选项缺少value属性，Shopify的ChoiceList要求每个选项必须包含label和value两个字段（参考官方示例），缺少该字段组件无法正常处理选中逻辑。

修改后的代码 #

把forEach替换为map方法（map会返回新数组），同时给每个选项添加唯一的value字段：

<ChoiceList
  choices={data.map((element) => ({
    label: element.title,
    value: element.id // 若标题唯一，也可以用element.title作为value
  }))}
  selected={selectedExport}
  onChange={handleSelectedExport}
/>

说明 #

• map方法遍历data数组时，会为每个元素生成一个包含label和value的对象，最终组成符合组件要求的选项数组。
• value建议使用产品的唯一标识（比如ID），避免多个产品标题重复时，选中逻辑出现混乱。

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