为何map()渲染内容为纵向而非横向？React电影应用布局问题

1. 修复"unique key prop"警告 #

你之前加key没生效，是因为没把key放在map循环返回的最外层元素上。修改MovieList组件，把key={movie.imdbID}加到包裹img的div上：

function MovieList(props) {
  return (
    <div>
      {props.movies.map((movie) => (
        <div key={movie.imdbID}>
          <img src={movie.Poster} alt={movie.Title || "movie"} />
        </div>
      ))}
    </div>
  );
}

如果接口返回的唯一标识不是imdbID，换成你实际拿到的字段即可；要是实在没有唯一ID，临时用key={index}也能消除警告，但优先用业务唯一标识。

2. 实现电影海报横向排列+滚动 #

给MovieList的外层容器添加CSS样式，通过flex布局实现横向排列，再开启横向滚动：

快速实现（内联样式） #

function MovieList(props) {
  return (
    <div style={{
      display: "flex",
      gap: "15px",
      overflowX: "auto",
      padding: "10px 0"
    }}>
      {props.movies.map((movie) => (
        <div key={movie.imdbID} style={{ width: "180px" }}>
          <img src={movie.Poster} alt={movie.Title || "movie"} style={{ width: "100%", height: "auto" }} />
        </div>
      ))}
    </div>
  );
}

规范实现（CSS类） #

先写CSS样式：

.movie-scroll-container {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding: 10px 0;
  /* 可选：隐藏滚动条，保留滚动功能 */
  scrollbar-width: none;
}
.movie-scroll-container::-webkit-scrollbar {
  display: none;
}
.movie-card {
  width: 180px;
}
.movie-card img {
  width: 100%;
  height: auto;
  border-radius: 8px; /* 可选：给海报加圆角 */
}

再修改组件：

function MovieList(props) {
  return (
    <div className="movie-scroll-container">
      {props.movies.map((movie) => (
        <div key={movie.imdbID} className="movie-card">
          <img src={movie.Poster} alt={movie.Title || "movie"} />
        </div>
      ))}
    </div>
  );
}

父组件里的col-sm可以保留，若不需要Bootstrap的列布局，直接移除也不影响横向滚动效果。

内容的提问来源于stack exchange，提问作者ProfessorSocks