React for循环列表key问题：已设key仍触发唯一key警告

问题根源 #

你遇到的警告有两个核心原因：

1. key的位置错误：你将key属性加在了<li>标签上，但实际React要求列表数组中每个子元素的最外层节点必须带有唯一key。你现在用无key的<>（Fragment）包裹<li>，React会把Fragment当作列表项的外层，而它没有key，因此触发警告。
2. key值重复：你给不同的列表项设置了重复的key（比如所有首尾页按钮都用key="1"，当前页前后的按钮都用key="2"），这违反了key必须唯一的要求。

修复步骤 #

1. 移除不必要的Fragment包裹，直接将<li>作为列表项的最外层元素。
2. 为每个列表项设置全局唯一的key：
   • 普通页码按钮直接用page值作为key（因为每个page都是唯一数字）。
   • 左右省略号按钮使用固定的唯一标识作为key（比如"dots-left"、"dots-right"）。

修改后的代码 #

//Création des boutons
const buttons = [];

for (const page of pageNumbers) {
    //if page is first or endPage
    if (page === 1 || page === totalPages) {
        buttons.push(
            <li
                key={page.toString()}
                className={`page-item ${
                    currentPage == page ? "active" : ""
                }`}
            >
                <Button
                    className="page-link btnPaginate btn btn-link"
                    variant="link"
                    value={page}
                    onClick={() => props.handlePaginate(page)}
                >
                    {page}
                </Button>
            </li>
        );
    }
    //if page is not first or not endPage
    else if (page >= currentPage - 1 && page <= currentPage + 1) {
        buttons.push(
            <li
                key={page.toString()}
                className={`page-item ${
                    currentPage == page ? "active" : ""
                }`}
            >
                <Button
                    className="page-link btnPaginate btn btn-link"
                    variant="link"
                    value={page}
                    onClick={() => props.handlePaginate(page)}
                >
                    {page}
                </Button>
            </li>
        );
    }
    //show left dots 
    else if (showDotsLeft && page === 2) {
        buttons.push(
            <li
                key="dots-left"
                className={`page-item ${
                    currentPage == page ? "active" : ""
                }`}
            >
                <Button
                    className="page-link btnDotsLeft btn btn-link"
                    variant="link"
                >
                    ...
                </Button>
            </li>
        );
    }
    //show right dots
    else if (showDotsRight && page === currentPage + 2) {
        buttons.push(
            <li
                key="dots-right"
                className={`page-item ${
                    currentPage == page ? "active" : ""
                }`}
            >
                <Button
                    className="page-link btnDotsRight btn btn-link"
                    variant="link"
                >
                    ...
                </Button>
            </li>
        );
    }
}

额外说明 #

• 不需要给<Button>设置key，因为它不是列表的直接子元素，只需要确保列表数组中的每个顶级元素有唯一key即可。
• 如果page是数字类型，转为字符串作为key是安全的，React接受字符串或数字类型的key。

内容的提问来源于stack exchange，提问作者Rémy Legrand