在 React Native 中使用 Flatlist 进行分页 (Next/Previous)

Question

最近开始学习React Native，在项目中堆了个分页。我正在尝试创建一个 Flatlist，它将仅显示数据中的前十项。然后，当您单击下一个箭头时，它将显示下一个不同的十个项目，而不是前十个，依此类推。与后退箭头相同的逻辑，但只有前十项。这是我的代码。它有效，但有一些问题。第一次点击后十个项目后，它显示相同的十个，但当你再次点击时，它显示不同的十个。后退箭头似乎根本无法正常工作。有人可以帮我调整我的代码来解决这些问题吗？我将不胜感激任何帮助。谢谢！

https://snack.expo.dev/rWq_FLP8o

Answer 1

你应该做的是在你的 useEffect 中添加 pageCurrent 作为依赖项。所以每次 pageCurrent 改变 useEffect 运行。

  useEffect(() => {
    (async () => {
      const apiURL = `https://jsonplaceholder.typicode.com/albums?_limit=10&_page=${pageCurrent}`;
      fetch(apiURL)
        .then((res) => res.json())
        .then((resJson) => {
          setData(resJson);
        });
    })();
  }, [pageCurrent]); // <-- Makes pageCurrent a dependency

下一步，当您返回第 1 页时，它会停留在第 1 页。这样您就不会得到负页或零页。

const handlePreviousPage = () => {
        console.log("previous page clicked", pageCurrent)
        // Do this so your page can't go negative
        setpageCurrent(pageCurrent - 1<1?1:pageCurrent - 1)
}

这是一个完整的例子 (https://snack.expo.dev/@heytony01/keyboard-function-component-example)

在 React Native 中使用 Flatlist 进行分页 (Next/Previous)

Pagination using Flatlist in React Native (Next/Previous)

pagination

toggle

react-native

use-state

flatlist