在 ReactJS 中的映射内映射答案

【问题标题】：Mapping within a map in ReactJS在 ReactJS 中的映射内映射
【发布时间】：2020-06-13 17:04:09
【问题描述】：

我正在尝试将每个值和字体真棒图标映射到每个按钮。

每个值的数据

const test = ["440", "756", "28", "249", "345", "397", "301", "507", "648"]

映射字体真棒图标的代码

const icons = [
        { id:0, name: faHeadphonesAlt, label:'Music'},
        { id:1, name: faPhone, label:'Phone'},
        { id:2, name: faHeartbeat, label:'Health'},
        { id:3, name: faShoppingBag, label: 'Shopping'},
        { id:4, name: faShieldAlt, label: 'Security'}
    ]

尝试解决

test.map(a => {
            return (
                <div>
                <button>
                    {
                        icons.map(icon => {
                            return(
                                <FontAwesomeIcon
                                    id={icon.id}
                                    icon={icon.name}
                                />

                            )
                        })
                    }
                    <hr />
                    £{a}
                </button>
                </div>
            )
        }
    )

关于如何在映射值数组时让每个图标显示在每个按钮中的任何想法？

【问题讨论】：

标签： javascript arrays reactjs array.prototype.map

【解决方案1】：

您好，如果您想为按索引排序的每个按钮显示一个图标，请参阅此

https://codesandbox.io/s/serene-driscoll-03s2n

你不需要映射每个图标，你也有 9 个按钮和 5 个图标，所以我将它们设为 9 个图标

所以你的 JSX 组件渲染应该返回

  return test.map((a, indx) => {
    return (
      <div>
        <button>
          <FontAwesomeIcon id={icons[indx].id} icon={icons[indx].name} />
          <hr />£{a}
        </button>
      </div>
    );
  });

希望对你有帮助?

【讨论】：

【解决方案2】：

回报先来：

return <div>
         {test.map(a => (
            <button>
                {
                    icons.map(icon => {
                        return(
                            <FontAwesomeIcon
                                id={icon.id}
                                icon={icon.name}
                            />

                        )
                    })
                }
                <hr />
                £{a}
            </button>
          )}
        </div>

【讨论】：