如何在反應中將鍵放在for循環中

Question

我在使用 for 循環時遇到一個關鍵問題，它給了我一個警告

我正確地插入了我的鑰匙，但我認為但我有：“警告：列表中的每個孩子都應該有一個獨特的“鑰匙”道具。” 錯誤

    //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={"1"}
                        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={"2"}
                        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={"3"}
                        className={`page-item ${
                            currentPage == page ? "active" : ""
                        }`}
                    >
                        <Button
                            className="page-link btnDotsLeft btn btn-link"
                            variant="link"
                            key="dots-left"
                        >
                            ...
                        </Button>
                    </li>
                </>
            );
        }
        //show right dots
        else if (showDotsRight && page === currentPage + 2) {
            buttons.push(
                <>
                    <li
                        key={"4"}
                        className={`page-item ${
                            currentPage == page ? "active" : ""
                        }`}
                    >
                        <Button
                            className="page-link btnDotsRight btn btn-link"
                            variant="link"
                        >
                            ...
                        </Button>
                    </li>
                </>
            );
        }
    }

我正確地插入了我的鑰匙，但我認為但我有：“警告：列表中的每個孩子都應該有一個獨特的“鑰匙”道具。” 錯誤

Answer 1

您應該為每個孩子以及 children 中的每個元素添加一個鍵。

這樣 React 可以處理所有最小的 DOM 變化，

所以你也需要為每個<Button />設置key屬性！

Answer 2

需要將key添加到頂級元素中。

在您的示例中，您有一個React.Fragment作為頂級元素，而不是<li>您將密鑰添加到其中。

Answer 3

找到解決方案...使用 <React.Fragment key={page}> 而不是 <>

<React.Fragment key={page}>
                    <li
                        key="1"
                        className={`page-item ${
                            currentPage == page ? "active" : ""
                        }`}
                    >
                        <Button
                            key="2"
                            className="page-link btnPaginate btn btn-link"
                            variant="link"
                            value={page}
                            onClick={() => props.handlePaginate(page)}
                        >
                            {page}
                        </Button>
                    </li>
                </React.Fragment>

感謝您的意見和幫助