javascript - ReactJS 中 map 内的映射

Question

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

每个值的数据

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

映射 Font Awesome 图标的代码

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>
            )
        }
    )

关于如何在映射值数组的同​​时让每个图标显示在每个按钮中，有什么想法吗？

Answer 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>
    );
  });

希望有帮助😘