react list都设置了key,为什么还提示list的child需要一个唯一key？

Question

Warning: Each child in a list should have a unique "key" prop.
Check the render method of Page.

代码大概如下

Page组件：

const Page = ({data}) => {
    return (
        <>
            {data.map((item) => {
                return <ListItem key={item.id}>....</ListItem>
            })}
        </>
    )
}

主组件：

const [page, setPage] = useState(1)
const pages = []
for (let i = 1; i <= page; i++) {
    pages.push(<Page data={data} key={i} />)
}
const handleLoadMore = () => {
    setPage(page + 1)
}

return (
    <>
        <List>
            {pages}
        </List>
         <Button variant="outlined" onClick={handleLoadMore}>加载更多</Button>
    </>
)

我每个Page组件都有唯一key,Page组件里面的item也设置了唯一key,怎么一开打也没还是提示要社会子key的警告？

Answer 1

pages.push(<Page data={data} key={i} />)这里不需要加key,因为你这个组件内部已经加了key了。

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。