Question

我正在从API提取数据，该数据每页限制20个项目。我正在尝试实现滚动，所以当我到达20个项目的末尾时，将检索并显示一个包含其他20个项目的新页面，但是我还想保留所有先前的项目，并在我滚动回顶部时将其变为可用，这就是我要失败的地方。

这就是我正在逐步执行的操作。

我正在渲染屏幕
useEffect被触发，我获取了API的第一页
然后使用Flatlist呈现第一批20件商品
滚动到末尾时，我调用函数[loadMoreCommit]将[页面]加1
useEffect再次触发，因为它依赖于[page]并获取以下20个项目的批次，依此类推...

到目前为止，所有功能都按预期工作，除了我当时只看到20个项目而丢失了所有以前的项目。

  const [page, setPage] = useState(1);
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  const loadMoreCommit = () => {
    setPage(page + 1);
  };

useEffect(() => {
    fetch(
      `https://api.themoviedb.org/3/person/popular?api_key=${ENV.tmdbApiKey}&page=${page}`
    )
      .then((res) => res.json())
      .then((res) => {
        setData(res.results);        
      });
    setIsLoading(false);
  }, [page]);

return (
          <FlatList            
            data={data}
            initialNumToRender={10}            
            keyExtractor={(item) => item.id.toString()}
            onEndReached={loadMoreCommit}
            onEndReachedThreshold={0.5}
            renderItem={(itemData) => (
              <StarsItem
                id={itemData.item.id}
                count={count++}
                backdrop={itemData.item.profile_path}
                poster={itemData.item.profile_path}
                title={itemData.item.name}
              />
            )}
          />
)

在阅读其他文章时，我试图通过替换

来保留历史数据

setData(res.results);

如果我使用

setData({ data: [...data, ...res.results] });

我收到“无效的尝试传播不可迭代实例的尝试” 警告

我还尝试将可以在某些教程上使用的先前值和新值连接起来，但出现错误

setData({ data: data.concat(res.results) });

data.concat不是函数

Answer 1

我认为一个更好的选择是setData(prevData => [...prevData, ...res.results])。

使用Flatlist在React Native中进行无限滚动

1 个答案: