时间戳

首页 > 解决方案 > 为什么即使在为返回值提供键之后反应键也不起作用

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

问题描述

我用过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>

标签： reactjs

解决方案

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

推荐阅读