HI当所有项目都来自显示在react中的数组时，卸载更多按钮

Question

这应该很容易，但我当然无法理解：(

基本上，我已经实现了一个"；加载更多"；按钮，当数组中有更多项目要显示时，但当它到达末尾时，我想隐藏它。下面的代码不起作用，我有一种感觉，因为它需要检查数组的索引，如果它在末尾，则隐藏按钮，但我不确定如何处理语法。感谢

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 = () => {
// get first 12 items in array & load next 12 with "see more button"
const STEP = 12;
const [items, setItems] = useState(releases.slice(0, STEP));
const loadMore = () => {
setItems([...items, ...releases.slice(items.length, items.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>
))}
{/* code that isn't working here */}
{items ? <button onClick={loadMore} className="btn" > show more </button> : <button className="btn hidden" ></button>}
</div>
</Wrapper >
)
}

Answer 1

当项目少于12时，按钮将不会显示

{items%12 ===0 ? <button onClick={loadMore} className="btn" > show more </button> : nul}