在 ReactJS 中的地图内映射

Question

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

每个值的数据

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

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

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

希望有帮助😘

Answer 2

返回需要首先出现：

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

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