Javascript 将对象数组传递给使用不同键的组件

我试图呈现由React生成的动态

元素：

input select

组件（见下文）获取一个对象数组，每个对象必须包含

的值及其标题

export default function InputSelect (props) {
  return (
    <label className="form__element">
      {props.caption}
      <select className="input-select">
        {props.items.map((item, i) => <option key={i} value={item.value}>{item.caption}</option>)}
      </select>
    </label>
  )
}

其中，我有不同的密钥，由于该数据是从db检索的，所以我无法更改这些密钥

---

如何修复此问题？

您可以将映射器对象传递给您的选择：

function App () {
    const apiData = [
      {code: "IT", name: "Italy"},
      {code: "US", name: "United States"},
    ]

     const mapper = {value: 'code', caption: 'name'}; 
         return(
           <InputSelect items={apiData} mapper={mapper} />
          )
   }



   const defaultMapper = {value: "value", caption: "label"}

   function InputSelect ({ items, caption, mapper = defaultMapper }) {
      const {value, caption} = mapper
      return (
        <label className="form__element">
          {caption}
          <select className="input-select">
            {items.map((item, i) => <option key={i} value={item[value]}>{item[caption]}</option>)}
          </select>
        </label>
      )
    }

函数应用程序（）{
常数apiData=[
{代码：“IT”，名称：“意大利”}，
{代码：“美国”，名称：“美国”}，
]
常量映射器={value:'code'，caption:'name'}；
返回(
)
}
常量defaultMapper={value:“value”，标题：“label”}
函数InputSelect（{items，caption，mapper=defaultMapper}）{
常量{value，caption}=mapper
返回(
{标题}
{items.map（（item，i）=>{item[caption]}）
)
}

您可以将映射器对象传递给您的选择：

function App () {
    const apiData = [
      {code: "IT", name: "Italy"},
      {code: "US", name: "United States"},
    ]

     const mapper = {value: 'code', caption: 'name'}; 
         return(
           <InputSelect items={apiData} mapper={mapper} />
          )
   }



   const defaultMapper = {value: "value", caption: "label"}

   function InputSelect ({ items, caption, mapper = defaultMapper }) {
      const {value, caption} = mapper
      return (
        <label className="form__element">
          {caption}
          <select className="input-select">
            {items.map((item, i) => <option key={i} value={item[value]}>{item[caption]}</option>)}
          </select>
        </label>
      )
    }

函数应用程序（）{
常数apiData=[
{代码：“IT”，名称：“意大利”}，
{代码：“美国”，名称：“美国”}，
]
常量映射器={value:'code'，caption:'name'}；
返回(
)
}
常量defaultMapper={value:“value”，标题：“label”}
函数InputSelect（{items，caption，mapper=defaultMapper}）{
常量{value，caption}=mapper
返回(
{标题}
{items.map（（item，i）=>{item[caption]}）
)
}

假设您拥有

InputSelect

组件，您可以让它从

道具中获取
标题
和
值
键，如下所示：


const{Fragment}=React
常量国家=[
{代码：“IT”，名称：“意大利”}，
{代码：“美国”，名称：“美国”}，
]
常量语言=[
{value:'IT'，标题：'Italiano'}，
{值：'DE'，标题：'Tedesco'}
]
const App=props=>(


)
函数InputSelect（{valueKey='value'，captionKey='caption'，…props}）{
返回(
{props.caption}
{props.items.map（（item）=>{item[captionKey]}）
)
}
ReactDOM.render（，document.body）
假设您拥有
InputSelect
组件，您可以让它从
道具中获取
标题
和
值
键，如下所示：


const{Fragment}=React
常量国家=[
{代码：“IT”，名称：“意大利”}，
{代码：“美国”，名称：“美国”}，
]
常量语言=[
{value:'IT'，标题：'Italiano'}，
{值：'DE'，标题：'Tedesco'}
]
const App=props=>(


)
函数InputSelect（{valueKey='value'，captionKey='caption'，…props}）{
返回(
{props.caption}
{props.items.map（（item）=>{item[captionKey]}）
)
}
ReactDOM.render（，document.body）


使用

（{value:country.code，标题：country.name}））
}
/>

使用

（{value:country.code，标题：country.name}））
}
/>
{item.value}
不起作用吗？注意：我刚刚使用了示例数组中对象的属性名来进行说明。是的，它可以工作，但我希望将此组件与不同的数据集一起使用。在调用此组件之前，您需要映射结果数组以创建具有正确属性名的新组件。
{item.value}
不工作？注意：我刚刚使用了示例数组中对象的属性名来进行说明。是的，它可以工作，但我希望将此组件与不同的数据集一起使用。在调用此组件之前，您需要映射结果数组以创建具有正确属性名的新组件。此外，你应该使用这个值作为选项的键，而不是像你在评论中提到的索引。这通常是正确的，如果你检查我对这个问题的评论，我就是在那里做的。这在这里可能并不重要，除非作者将对这些列表中的项目进行动态排序、添加或删除。无论如何，我将编辑代码段来显示这一点。此外，您应该使用值作为选项的键，而不是像您在评论中提到的索引。这通常是正确的，如果您检查我对问题的评论，我会在那里这样做。这在这里可能并不重要，除非作者将对这些列表中的项目进行动态排序、添加或删除。无论如何，我将编辑代码片段来显示这一点。
<InputSelect
  items={
   [
    {code: "IT", name: "Italy"},
    {code: "US", name: "United States"},
   ].map(country => ({value: country.code, caption: country.name}))
  }
/>