如何在 React 中创建加载更多逻辑

通常我们倾向于使用后端 API 来实现加载更多逻辑，传入一个跳过值，后端 API 会返回下一组数据。但如果我们想在前端针对某些特定情况实现相同的逻辑，该怎么办呢？本文将学习如何在 React 中创建加载更多逻辑。

查看后端更好的分页方法。

问题

假设我们在前端有一个包含 100 个对象的数组，并且我们想一次只显示 n 个项目，并且下一组数据将在单击 l* oad more * 按钮时加载。

我们通常使用后端来做这件事，我们传递跳过值，它会返回下一组数据，但现在我们想在我们的 React 前端做同样的事情。

解决方案

首先，我们将为我们的加载逻辑设置一些变量。

我们的数据的长度是使用LENGTH指定的。

const LENGTH = 50;

之后我创建了一个长度为LENGTH的数组DATA。

const DATA = [ ...Array(LENGTH).keys() ];

然后在 UI 中显示一个随机图像，即IMAGE_SRC。

const IMAGE_SRC="https://source.unsplash.com/random";

限制为 10。即LIMIT

const LIMIT = 10;

const LENGTH = 50;
const DATA = [ ...Array(LENGTH).keys() ];
const IMAGE_SRC="https://source.unsplash.com/random";
const LIMIT = 10;

现在我们将要写几个状态。

为了简单起见，我们还将使用lodash 的slice和concat 。

检查我们是否还有更多记录。

const [showMore,setShowMore] = useState(true);

初始渲染列表

const [list,setList] = useState(slice(DATA, 0, LIMIT));

用于管理索引。

const [index,setIndex] = useState(LIMIT);

我们的加载逻辑将会执行以下操作。

它将通过添加 LIMIT 来更新索引。
检查我们是否还有更多记录。
通过将下一组添加到我们的数组来更新我们的列表。

  const loadMore = () =>{
    const newIndex = index + LIMIT;
    const newShowMore = newIndex < (LENGTH - 1);
    const newList = concat(list, slice(DATA, index, newIndex));
    setIndex(newIndex);
    setList(newList);
    setShowMore(newShowMore);
  }

我们的渲染方法将返回图像列表和加载更多按钮。

   <div className="App">
      <div className="image-container">
      {list.map(()=><img src={IMAGE_SRC} alt="random"/>)}
      </div>
      {showMore && <button onClick={loadMore}> Load More </button>}
    </div>

我们的完整组件将会看起来像这样。

import React,{useState} from "react";
import {
  slice, concat, 
} from 'lodash';

import "./styles.css";

const LENGTH = 50;
const DATA = [ ...Array(LENGTH).keys() ];
const IMAGE_SRC="https://source.unsplash.com/random";
const LIMIT = 10;

export default function App() {
  const [showMore,setShowMore] = useState(true);
  const [list,setList] = useState(slice(DATA, 0, LIMIT));
  const [index,setIndex] = useState(LIMIT);

  const loadMore = () =>{
    const newIndex = index + LIMIT;
    const newShowMore = newIndex < (LENGTH - 1);
    const newList = concat(list, slice(DATA, index, newIndex));
    setIndex(newIndex);
    setList(newList);
    setShowMore(newShowMore);
  }
  return (
    <div className="App">
      <div className="image-container">
      {list.map(()=><img src={IMAGE_SRC} alt="random"/>)}
      </div>
      {showMore && <button onClick={loadMore}> Load More </button>}
    </div>
  );
}

您将会看到类似这样的输出。

我们的 React Frontend 加载更多逻辑已准备就绪。

鏂囩珷鏉ユ簮锛�https://dev.to/narendersaini32/how-to-create-load-more-logic-in-react-474m