React Native类组件转函数组件后无限滚动搜索异常

我帮你分析下这个问题哈，函数组件里搜索后仍显示旧数据，核心原因是React函数组件的状态更新是异步的，加上闭包导致的旧状态引用问题，而类组件里因为setState支持回调函数，能确保状态更新完成后再执行后续逻辑，所以没这个问题。下面给你具体的解决方案：

问题根源拆解 #

1. 异步状态更新导致的时序问题：在_searchFilms里调用setPage(0)、setFilms([])后立刻执行_loadFilms，此时page和films的状态还没完成更新，_loadFilms用到的还是更新前的旧值，导致新搜索结果和旧数据混在一起。
2. 闭包捕获旧状态：_loadFilms里用[...films, ...data.results]更新列表时，films是函数创建时捕获的闭包值，不是最新的状态，多次操作后旧数据会被保留。

解决方案 #

方案1：用函数式更新获取最新状态 #

修改_loadFilms中的状态更新逻辑，使用React的函数式更新来获取最新的状态值，避免闭包问题：

const _loadFilms = () => {
  if (searchedText.length > 0) {
    setIsLoading(true);
    getFilmsWithSearch(searchedText, page + 1).then((data) => {
      setPage(data.page);
      setTotalPages(data.total_pages);
      // 使用函数式更新，确保拿到最新的films状态
      setFilms(prevFilms => [...prevFilms, ...data.results]);
      setIsLoading(false);
    });
  }
};

方案2：修复搜索时的异步时序问题 #

在函数组件里没有类组件setState的回调函数，所以我们需要调整搜索触发的逻辑，确保状态更新完成后再加载新数据：

方法A：添加搜索触发信号

通过新增一个状态变量来触发搜索，配合useEffect监听信号变化：

const Search = () => {
  const [films, setFilms] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [page, setPage] = useState(0);
  const [totalPages, setTotalPages] = useState(0);
  const [searchedText, setSearchedText] = useState("");
  // 新增搜索触发信号
  const [triggerSearch, setTriggerSearch] = useState(false);

  // 监听触发信号，执行搜索逻辑
  useEffect(() => {
    if (triggerSearch && searchedText.length > 0) {
      setIsLoading(true);
      getFilmsWithSearch(searchedText, 1).then((data) => {
        setPage(data.page);
        setTotalPages(data.total_pages);
        setFilms(data.results);
        setIsLoading(false);
        setTriggerSearch(false); // 重置触发信号
      });
    }
  }, [triggerSearch, searchedText]);

  const _searchTextInputChanged = (text) => {
    setSearchedText(text);
  };

  const _searchFilms = () => {
    setPage(0);
    setTotalPages(0);
    setFilms([]);
    setTriggerSearch(true); // 触发搜索
  };

  // ...其他函数和渲染逻辑不变
};

方法B：让_loadFilms接受明确的页码参数

修改_loadFilms，让它支持传入目标页码，搜索时直接传入第一页，不需要依赖状态中的page：

const _loadFilms = (targetPage = page + 1) => {
  if (searchedText.length === 0) return;
  
  setIsLoading(true);
  getFilmsWithSearch(searchedText, targetPage).then((data) => {
    setPage(data.page);
    setTotalPages(data.total_pages);
    // 第一页直接替换数据，后续页码追加数据
    setFilms(prevFilms => targetPage === 1 ? data.results : [...prevFilms, ...data.results]);
    setIsLoading(false);
  });
};

const _searchFilms = () => {
  // 搜索时直接加载第一页
  _loadFilms(1);
};

额外优化：取消未完成的API请求（可选） #

如果用户快速多次搜索，旧的API请求可能会晚于新请求返回，导致新结果被旧结果覆盖。可以用AbortController来取消未完成的请求：

const Search = () => {
  // ...其他状态
  const abortControllerRef = useRef(null);

  const _loadFilms = (targetPage = page + 1) => {
    if (searchedText.length === 0) return;
    
    // 取消之前未完成的请求
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
    }
    abortControllerRef.current = new AbortController();
    
    setIsLoading(true);
    getFilmsWithSearch(searchedText, targetPage, { signal: abortControllerRef.current.signal })
      .then((data) => {
        setPage(data.page);
        setTotalPages(data.total_pages);
        setFilms(prev => targetPage === 1 ? data.results : [...prev, ...data.results]);
      })
      .catch((error) => {
        // 忽略取消请求的错误
        if (error.name !== 'AbortError') {
          console.error('加载电影失败:', error);
        }
      })
      .finally(() => {
        setIsLoading(false);
      });
  };

  // 组件卸载时取消请求
  useEffect(() => {
    return () => {
      if (abortControllerRef.current) {
        abortControllerRef.current.abort();
      }
    };
  }, []);

  // ...其他函数和渲染逻辑
};

为什么类组件没问题？ #

类组件中this.setState可以接受第二个回调参数，这个回调会在状态更新完成后执行：

this.setState(
  { films: [] },
  () => { this._loadFilms(); } // 状态更新完成后才执行
);

这样能确保_loadFilms使用的是更新后的状态，所以不会出现旧数据残留的问题。

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