如何在React中基于JSON数据实现「查看更多」功能

不需要提前拆分数组，直接通过状态管理展示条数，每次点击加载下一组数据即可，以下是修改后的组件代码：

import { useState } from 'react';
import releases from "../data/releases.json";
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import '../main.css'

const Release = () => {
  // 初始展示12条数据，每次加载新增12条
  const [displayCount, setDisplayCount] = useState(12);
  const itemsPerLoad = 12;

  // 处理「查看更多」点击事件
  const handleLoadMore = () => {
    // 确保展示数量不超过总数据量
    setDisplayCount(prevCount => Math.min(prevCount + itemsPerLoad, releases.length));
  };

  // 截取当前需要展示的数据片段
  const displayedReleases = releases.slice(0, displayCount);

  return (
    <Wrapper>
      <div className="release fadein">
        {displayedReleases.map((release) => (
          <div className="item" key={release.id}>
            <Link to={`/release/${release.id}`}>
              <img src={release.imageURL} alt={release.artist} />
            </Link>
          </div>
        ))}
        {/* 仅当还有未展示数据时，显示「查看更多」 */}
        {displayCount < releases.length && (
          <button onClick={handleLoadMore} style={{ background: 'transparent', border: 'none', color: '#0066cc', cursor: 'pointer', textDecoration: 'underline' }}>
            See more...
          </button>
        )}
      </div>
    </Wrapper>
  )
}

export default Release;

关键说明 #

• 用useState维护当前展示的数据条数displayCount，初始值设为12
• 点击「查看更多」时，调用handleLoadMore更新展示条数，通过Math.min避免超出总数据量
• 直接用slice(0, displayCount)截取需要展示的数据，无需提前拆分整个数组，逻辑更简洁高效
• 将列表项的key从索引替换为release.id，符合React最佳实践，避免数据更新时出现渲染异常
• 仅当还有未展示数据时才显示「查看更多」按钮，提升用户体验

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