React/Shopify:如何使用〔｛｝〕(选项列表组件)迭代道具

Question

我正试图让我的产品标题成为我的选择列表中的选项。在Shopify文档中，它应该是这样的

<ChoiceList
title="Company name"
choices={[
{label: 'Hidden', value: 'hidden'},
{label: 'Optional', value: 'optional'},
{label: 'Required', value: 'required'},
]}
selected={selected}
onChange={handleChange}
/>

我的代码就像这个

<ChoiceList
choices={
[
data.forEach((element) => (
{ label: `${element.title}` }
))
]
}
selected={selectedExport}
onChange={handleSelectedExport}
/>

但是这个代码似乎不起作用。我应该如何更改代码？

Answer 1

您应该使用map而不是forEach，因为您想要创建一个新数组(forEach返回undefined(。此外，您不需要将其封装在括号中，因为它已经是一个数组：

<ChoiceList
choices={data.map((element) => ({ label: `${element.title}` }))}
selected={selectedExport}
onChange={handleSelectedExport}
/>;

---

旁注：如果element.title已经是一个字符串，那么你应该只使用{ label: element.title }，或者如果你觉得很喜欢，那么就销毁并使用缩写初始化：

choices={data.map(({ title: label }) => ({ label }))}

如果它是而不是字符串，请考虑使用element.title.toString()或其他将其转换为字符串的显式方法。