React中map函数实现问题求助：Footer组件渲染异常排查

问题描述 #

想要实现如图所示的多列字符排版效果，在Footer.jsx中使用map函数遍历数组后无法正常渲染，需排查代码问题并给出修改方案。

现有代码（Footer.jsx） #

const array = [
  'Meta', '소개', '블로그', '채용 정보', '도움말', 'API', '개인정보처리방침', '약관', '인기 계정', '해시태그', '위치', 'Instagram Lite', '연락처 업로드 & 비사용자'
]

function Footer() {
  return (
    <FooterWrap>
      <div className='FooterWrap2'> 
        <div className='FooterContent1'>
          <div className='FooterContent1Wrap'>
            {array.map((text, idx) => {
              return (
                <div>
                  <a>
                    <div>
                      {text}
                    </div>
                  </a>
                </div>
              )              
            })}
          </div>
        </div>
        <div className='FooterContent2'>

        </div>
      </div>
    </FooterWrap>
  )
}

export default Footer;

问题分析与修改方案 #

核心问题1：缺失React列表渲染必需的key属性 #

React中用map遍历生成元素时，必须给每个子元素添加唯一key属性，否则会触发渲染警告，甚至导致组件更新异常。这里直接用遍历的索引idx作为key即可（数组元素无动态排序/增删需求时，索引足够满足唯一性要求）。

核心问题2：无排版样式支撑 #

当前代码仅将所有元素平铺渲染，要实现图中多列布局，需通过CSS设置Flex或Grid布局。

修改后的完整代码 #

const array = [
  'Meta', '소개', '블로그', '채용 정보', '도움말', 'API', '개인정보처리방침', '약관', '인기 계정', '해시태그', '위치', 'Instagram Lite', '연락처 업로드 & 비사용자'
]

function Footer() {
  return (
    <FooterWrap>
      <div className='FooterWrap2'> 
        <div className='FooterContent1'>
          <div className='FooterContent1Wrap'>
            {array.map((text, idx) => {
              return (
                {/* 添加唯一key属性，同时简化嵌套结构 */}
                <div key={idx} className='footer-text-item'>
                  <a href='#'>{/* 建议补充实际跳转链接 */}
                    {text}
                  </a>
                </div>
              )              
            })}
          </div>
        </div>
        <div className='FooterContent2'>

        </div>
      </div>
    </FooterWrap>
  )
}

export default Footer;

补充CSS样式（实现多列排版） #

给父容器添加Grid布局，实现自适应多列效果：

.FooterContent1Wrap {
  display: grid;
  /* 自适应生成列，每列最小宽度120px */
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  /* 列间距与行间距 */
  column-gap: 12px;
  row-gap: 16px;
}

.footer-text-item {
  font-size: 14px;
}

.footer-text-item a {
  color: #8e8e8e;
  text-decoration: none;
}

.footer-text-item a:hover {
  text-decoration: underline;
}

额外优化点 #

• 给<a>标签补充实际href属性，避免仅显示静态文本无跳转功能；
• 原代码中嵌套了多层无意义的div，可直接简化为div > a的结构，减少DOM层级。

内容的提问来源于stack exchange，提问作者MontaKr