javascript - 如何在组件内为包含图片和 URL 的 LI 项目创建 React Loop？

Question

如何循环浏览社交媒体图标 LI 项目(包括 URL 和图像)？我的代码无法正常工作..我不知道为什么？

import React from 'react';

import iconFB from 'images/socials/facebook_logo.svg';
import iconIG from 'images/socials/insta_logo.svg';
import iconTW from 'images/socials/twitter_logo.svg';
import iconYT from 'images/socials/youtube_logo.svg';

const Social = () => {

    const icons = [
        { link: 'http://www.facebook.com', image: `${iconFB}`},
        { link: 'http://www.instagram.com', image: `${iconIG}`},
        { link: 'http://www.twitter.com', image: `${iconTW}`},
        { link: 'http://www.youtube.com', image: `${iconYT}`}
    ]

    return(
        <ul className="social">
            {
                icons.map((a, b, c) => {
                    return <li key={a}><a href={a} target="_blank"><img src={c}/></a></li>
                })
            }
        </ul>
    )
}

export default Social;

Answer 1

const socialNetworks = [
  { url: 'http://www.facebook.com', icon: iconFB },
  ...
];

const Social = () => (
  <ul>
    {
      socialNetworks.map(({ url, icon }) => (
        <li key={url}><a href={url} target="_blank"><img src={icon} /></a></li>
      ))
    }
  </ul>
);