为什么即使在为返回值提供键之后反应键也不起作用

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 ）。