Question

function fetchMoreListItems() {
    setTimeout(() => {
        let n = 0
        setListItems([...Items.slice(n, n + 6)])
        n = n + 6
        console.log(n)
    }, 2000)
}

如何使n每次调用函数时递增6。我试过 for 循环，但它不适用于 setTimeout()。

Answer 1

在您的代码中，每次在 setTimeout 内运行 lambda 时，您都在重新创建 n 变量，然后为其赋值。您应该在调用函数之前创建 n 变量，以便在调用之间保持它的值。

因此，在您的代码中：

    ... somewhere in your object / globally 
    let n = 0

    function fetchMoreListItems() {
            setTimeout(() => {
                setListItems([...Items.slice(n, n + 6)])
                n = n + 6
                console.log(n)
            }, 2000)
     }

您需要阐明用例以获得更详细的响应。

Answer 2

简单的方法是将 let n =0 移到 fetchMoreListItems 函数上方。

window.n = 0;

但是您在代码中尝试做的是JavaScript 概念闭包

  let add = function (n) {
      return function () {
            setTimeout(() => {
            //setListItems([...Items.slice(n, n + 6)])
           n = n + 6
           console.log(n)
       }, 2000)
     }
   }
    
   let fetchMoreListItems = add(0);
   fetchMoreListItems();

Answer 3

如果您希望每次调用 fetchMoreListItems 时都从 Items 数组中“抓取”接下来的 6 个元素以复制到 listItems 状态，那么您必须保持n 处于组件状态并每次递增。这似乎是基本的分页。

增加 n 状态并使用 useEffect 钩子更新 listItems 状态。

const [listItems, setListItems] = React.useState([........]);
const [n, setN] = React.useState(0); // <-- initially 0

React.useEffect(() => {
  setListItems(Items.slice(n, n + 6)); // <-- grab next 6 element chunk
}, [n]);

function fetchMoreListItems() {
  setTimeout(() => {
    setN(n => n + 6); // <-- increment by 6
  }, 2000)
}

每次调用函数时增加变量

3 个答案: