为什么react键不工作，即使给键返回值

Question

我使用uuidv4()，但它不起作用。我甚至尝试给物品自己的id，但它没有工作。这是我的代码。

<Grid container className="main-movie-container" spacing={3}>
{movies.map((movie) => {
return (
<>
<Grid className="sub-movie-container" key={movie.imdbID}>
<Card md={4} className="card">
<img src={movie.Poster} alt="" />
<div className="content">
<p className="name">{movie.Title}</p>
<p className="year">Release Date: {movie.Year}</p>
<button onClick={()=>addFavourites(movie)}>Add to Favourites</button>
</div>
</Card>
</Grid>
</>
)
})}
</Grid>

Answer 1

外层的 元素返回需要有唯一的键，在你的情况下，它是<>...</>，但React键与片段速记不兼容，所以你需要完全指定<Fragment key={movie.imdbID}>...</Fragment>。实际上最好去掉这个片段，因为您已经有一个包装器(Grid)，因此不需要它。