React电影应用：实现页面加载时默认显示全部电影

首先要明确：OMDB API没有提供获取「全部电影」的接口，s参数必须指定搜索关键词，空搜索会返回错误响应。所以你要的“显示全部电影”无法直接实现，不过可以通过调整初始化逻辑达到类似需求。

可选方案 #

方案1：初始化时不做默认搜索，引导用户输入 #

修改useEffect的逻辑，移除默认的Batman搜索调用：

useEffect(() => {
  // 去掉默认的searchMovies("Batman")
}, []);

同时可以修改空状态的提示文本，让提示更清晰：

<div className="empty">
  <h2>输入电影名称开始搜索</h2>
</div>

方案2：用宽泛关键词作为默认搜索（获取更多电影） #

如果你想初始化时展示一批电影而非特定的Batman，可以使用更宽泛的关键词（比如"film"）作为默认搜索词：

useEffect(() => {
  searchMovies("film");
}, []);

关于你尝试的“筛选非空电影” #

当前代码中movies?.length > 0的判断已经能处理空数组的情况。如果你的筛选逻辑没生效，大概率是因为OMDB返回的data.Search本身就是有效电影数据，不存在空项；如果API返回的结果里有无效数据，可以在设置状态前添加过滤：

const searchMovies = async (title) => {
  const response = await fetch(`${API_URL}&s=${title}`);
  const data = await response.json();
  // 过滤掉空的或缺少核心信息的电影项
  const validMovies = (data.Search || []).filter(movie => movie && movie.Title);
  setMovies(validMovies);
};

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