React useState状态不更新：影视应用切换分类时itemsList未清空

首先咱们拆解下你遇到的问题：点击Header的切换按钮时，你期望先清空itemsList再填充新数据，但实际却是新数据追加到旧数组里——这是React状态更新的异步性+闭包陷阱导致的。

在modeSelection函数里，你先调用setValues清空itemsList，紧接着就执行fetchItems。但React的setState是异步的，这意味着fetchItems执行时，外部的itemsList还是更新前的旧值，所以你做[...newItemsList, ...newItems]的时候，其实是把新数据追加到了旧数组上，而非空数组。

另外你完全不需要额外用useEffect来解决这个问题，只需要调整状态更新逻辑，让它能正确区分「切换模式（清空替换）」和「加载更多（追加）」两种场景即可。

具体修复步骤 #

1. 给fetchItems添加参数区分更新模式 #

修改fetchItems，让它接收一个replace参数（默认false，代表加载更多追加数据；true代表清空原有数据后替换）：

const fetchItems = (endPoint, replace = false) => {
  axios
    .get(endPoint)
    .then((response) => {
      const newItems = response.data.results;
      if (newItems) {
        setValues((prevValues) => {
          return {
            ...prevValues,
            page: response.data.page,
            // 根据replace参数决定是替换还是追加
            itemsList: replace ? [...newItems] : [...prevValues.itemsList, ...newItems],
            loading: false,
            totalPages: response.data.total_pages
          };
        });
      }
    })
    .catch((error) => {
      setValues(prev => ({ ...prev, error: true }));
      console.log(error);
    });
};

2. 修正modeSelection里的逻辑 #

• 不要依赖外部的mode变量构造接口地址（因为setValues是异步的，mode还没更新），直接用计算好的modeType
• 调用fetchItems时传入replace: true，明确告诉它要清空原有数据：

const modeSelection = (event) => {
  let modeType = "";
  const selectedMode = event.target.innerText;
  console.log(selectedMode);
  modeType = selectedMode === "Movies" ? "movie" : "tv";

  // 切换模式时重置page为1，并更新mode状态
  setValues((prevValues) => {
    return { ...prevValues, mode: modeType, page: 1 };
  });

  // 用最新的modeType构造接口地址，传入replace: true
  const endPoint = `https://api.themoviedb.org/3/${modeType}/${listType}?api_key=${msdb}&page=1`;
  fetchItems(endPoint, true);
};

3. 加载更多的适配（保留原有逻辑） #

当你后续实现Load More按钮时，只需要调用fetchItems时不传第二个参数（或传false），就会自动追加数据，完全兼容你的原有需求：

// 示例：加载更多函数
const loadMore = () => {
  if (page < totalPages) {
    const endPoint = `https://api.themoviedb.org/3/${mode}/${listType}?api_key=${msdb}&page=${page + 1}`;
    fetchItems(endPoint); // 默认replace为false，追加数据
    setValues(prev => ({ ...prev, page: prev.page + 1 }));
  }
};

方案优势 #

• 用setValues的回调函数prevValues获取最新状态，彻底避免闭包陷阱带来的旧值问题
• 通过replace参数明确区分两种更新场景，既满足切换模式时清空替换的需求，又保留了加载更多追加数据的功能
• 无需额外引入useEffect，逻辑简洁直接，代码可维护性更高

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