這應該很容易，但我當然想不通:)
基本上，當陣列中有更多要顯示的專案時，我已經實作了一個“加載更多”按鈕，但是當它到達末尾時，我想隱藏它。下面的代碼不起作用，我感覺這是因為它需要檢查陣列的索引，如果它在末尾，則隱藏按鈕，但我不確定如何處理語法。謝謝
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 >
)
}
uj5u.com熱心網友回復：
當專案少于 12 時，按鈕將不會顯示
{items%12 ===0 ? <button onClick={loadMore} className="btn" > show more </button> : nul}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/504562.html
標籤：javascript 反应 数组 目的