React中使用data.map渲染双列表格时元素重复问题求助

嘿，刚学React遇到这种小问题太正常啦！我来帮你捋捋问题出在哪，以及怎么解决～

问题根源分析 #

你之所以会出现每个元素在两列重复显示的情况，大概率是没有正确把链接数组分成两两一组来渲染——比如可能在表格的每一行里，两个<td>都去遍历了整个链接数组，或者每个链接都单独生成了一行两列的结构，导致同一个链接被重复渲染了两次。

解决方案：先分组，再渲染 #

我们需要先把你的链接数组处理成「每两个元素一组」的子数组，然后遍历分组后的数组，每组对应表格的一行，每行的两个列分别放组内的两个链接。

步骤1：写一个数组分组的辅助函数

这个函数会把原数组拆成每两个元素一组的新数组：

// 把数组按每2个元素分组的辅助函数
const groupLinks = (links) => {
  const grouped = [];
  // 每次跳2个索引，截取子数组
  for (let i = 0; i < links.length; i += 2) {
    grouped.push(links.slice(i, i + 2));
  }
  return grouped;
};

步骤2：在组件里分组并渲染表格

假设你的链接数组是类似[{url: 'xxx', text: '链接1'}, {url: 'xxx', text: '链接2'}, ...]的结构，我们可以这样渲染：

如果是类组件：

class LinkTable extends React.Component {
  groupLinks = (links) => {
    const grouped = [];
    for (let i = 0; i < links.length; i += 2) {
      grouped.push(links.slice(i, i + 2));
    }
    return grouped;
  };

  render() {
    // 假设你的链接数组存在this.props.links或者this.state.links里
    const groupedLinks = this.groupLinks(this.props.links);
    return (
      <table>
        <tbody>
          {groupedLinks.map((group, rowIndex) => (
            <tr key={rowIndex}>
              {/* 渲染第一个链接 */}
              <td>
                <a href={group[0].url} target="_blank" rel="noopener noreferrer">
                  {group[0].text}
                </a>
              </td>
              {/* 渲染第二个链接，如果组里只有一个元素（数组长度为奇数），就渲染空单元格 */}
              <td>
                {group[1] ? (
                  <a href={group[1].url} target="_blank" rel="noopener noreferrer">
                    {group[1].text}
                  </a>
                ) : null}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

如果是函数组件：

function LinkTable({ links }) {
  const groupLinks = (links) => {
    const grouped = [];
    for (let i = 0; i < links.length; i += 2) {
      grouped.push(links.slice(i, i + 2));
    }
    return grouped;
  };

  const groupedLinks = groupLinks(links);
  return (
    <table>
      <tbody>
        {groupedLinks.map((group, rowIndex) => (
          <tr key={rowIndex}>
            <td>
              <a href={group[0].url} target="_blank" rel="noopener noreferrer">
                {group[0].text}
              </a>
            </td>
            <td>
              {group[1] && (
                <a href={group[1].url} target="_blank" rel="noopener noreferrer">
                  {group[1].text}
                </a>
              )}
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

小提醒 #

• 尽量不要用index作为元素的key，如果你的链接对象有唯一的id属性，用id会更稳妥，避免React渲染时出现不必要的问题。
• 给<a>标签加上target="_blank"时，记得加上rel="noopener noreferrer"，这是安全最佳实践哦～

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