React中数组所有项展示后隐藏Load More按钮的实现问题

你的问题出在按钮的显示判断逻辑上——当前用items ? ... : ...，但items始终是一个数组（哪怕已经加载完所有数据），所以这个条件永远为真，按钮会一直显示。

正确的判断逻辑应该是检查当前展示的条目数是否小于总数据条数，也就是用items.length < releases.length来控制按钮的显示：

修改后的核心代码部分 #

// 替换原来的按钮渲染代码
{items.length < releases.length && (
  <button onClick={loadMore} className="btn">show more</button>
)}

另外，为了避免状态更新的闭包问题（比如连续点击按钮可能导致数据加载异常），建议把loadMore函数改成函数式更新的写法：

const loadMore = () => {
  setItems(prevItems => [...prevItems, ...releases.slice(prevItems.length, prevItems.length + STEP)]);
};

完整修改后的组件代码 #

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 = () => {
  const STEP = 12;
  const [items, setItems] = useState(releases.slice(0, STEP));

  const loadMore = () => {
    // 用函数式更新获取最新的prevItems状态
    setItems(prevItems => [...prevItems, ...releases.slice(prevItems.length, prevItems.length + STEP)]);
  };

  return (
    <Wrapper>
      <div className="release fadein">
        {items.map((item, i) => (
          <div className="item" key={i}>
            <Link to={`/release/${item.id}`}>
              <img src={item.imageURL} alt={item.artist} />
            </Link>
          </div>
        ))}
        {/* 正确的显示判断逻辑 */}
        {items.length < releases.length && (
          <button onClick={loadMore} className="btn"> show more </button>
        )}
      </div>
    </Wrapper>
  )
}

这样当所有数据都加载完成后，items.length会等于releases.length，按钮就会自动隐藏，不需要渲染一个空的隐藏按钮。

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