基于数据获取的状态更新问题：OMDB API搜索数据累加异常

存在的几个核心问题 #

• 异步状态更新导致旧值残留：React的setState是异步操作，你调用setmovieData([])后，紧接着的setmovieData([...movieData, ...data1.Search])里的movieData依然是重置前的旧状态值，所以新数据会和旧数据累加。
• 重复请求同一页数据：OMDB API默认返回第1页数据，你的res1没指定page参数，和res2的page=1请求的是同一批10条数据，会导致重复添加。
• 条件判断错误：if ((data1.Response = "True" && data1.Search))里用了赋值运算符=，应该用严格相等的===，否则会始终为真（因为赋值后表达式结果是"True"）。

修正后的代码 #

useEffect(
  function () {
    async function requestMovieData() {
      // 初始化空数组存储所有有效数据
      let allMovies = [];
      try {
        // 请求第1页和第2页数据（根据需求调整页码）
        const res1 = await fetch(`http://www.omdbapi.com/?apikey=51b8382f&s=${query}&page=1`);
        const res2 = await fetch(`http://www.omdbapi.com/?apikey=51b8382f&s=${query}&page=2`);

        const data1 = await res1.json();
        const data2 = await res2.json();

        // 验证数据并收集有效结果
        if (data1.Response === "True" && data1.Search) {
          allMovies.push(...data1.Search);
        }
        if (data2.Response === "True" && data2.Search) {
          allMovies.push(...data2.Search);
        }

        // 一次性设置状态，避免异步更新问题
        setmovieData(allMovies);
      } catch (err) {
        console.error("请求电影数据失败:", err);
        // 出错时重置状态
        setmovieData([]);
      }
    }

    requestMovieData();
  },
  [query],
);

关键修改说明 #

1. 先收集数据再统一更新状态：用临时变量allMovies存储所有有效数据，最后一次性调用setmovieData，彻底避免异步状态更新导致的旧值问题。
2. 修正请求页码：把res2的页码改为page=2，获取不同页的内容，避免重复数据。
3. 修复条件判断：将=改为===，确保正确判断API响应状态。
4. 增加错误处理：用try/catch捕获请求过程中的异常，出错时重置状态，提升代码健壮性。

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