javascript - 我应该使用什么作为 react 中 "row"元素的键？

Question

我有一个画廊，每行显示许多书籍。该画廊将书籍数组作为 Prop ，并使用“itemsPerRow” Prop 将书籍分块为二维数组，然后循环遍历所有书籍，以网格状结构显示书籍。

export default function Gallery({ items, itemsPerRow, renderLink }) {

    itemsPerRow = itemsPerRow ?? 3
    const rows = chunk(items, itemsPerRow)

    const renderEmptyItems = (itemsToRender) => {
        const items = []
        for(let n = itemsToRender; n > 0; n--) {
            items.push(<GalleryItem key={`empty_${n}`} empty/>)
        }

        return items
    }

    return (
        <div>
        {
            rows.map((row, index) => (
                <div key={index} className="tile is-ancestor">

                    {row.map(item => <GalleryItem key={item.id} renderLink={renderLink} {...item}/>)}

                    {/* Add empty gallery items to make rows even */}
                    {index + 1 === rows.length && renderEmptyItems(itemsPerRow - row.length)}
                </div>
            ))
        }
        </div>
    )
}

但是，除非我给代表一行的每个 div 一个键，否则 React 会提示缺少键。据我了解，使用索引作为键并不能真正帮助使用react，应该避免。那么我应该在这里使用什么作为 key <div key={index} className="tile is-ancestor">而不是索引？

Answer 1

为 key 属性使用唯一标识符(book.id，如果是唯一的话，也可以是 book.title)。如果您的数据没有唯一标识符，可以使用索引。