我使用numberuseParams 從 URL 路徑和deck陣列中獲取一個數字，以從data包含 32 個帶有 id 和 src（影像的 URL）屬性的物件的陣列中獲取資料
Images.js
const data = [
{
id:1,
src:'https://###.com/###',
},
(...)
const Images = () => {
const {number} = useParams()
const [deck, setDeck] = useState(data);
(...)
然后我用來useEffect從 URL 路徑中獲取數字，并setCards()通過從 洗掉索引number來根據 URL 中的給定數字顯示適當數量的卡片deck.length。shuffle()函式在這里無關緊要，它只是以隨機順序放置物件。
Images.js
useEffect(() => {
fetch(`http://localhost:3000/play/${number}`)
.then(setCards(number));
}, [number]);
const setCards = (number) => {
let tempDeck = deck;
tempDeck.splice(number, deck.length);
shuffle(tempDeck);
setDeck(tempDeck);
};
此外，我使用這段代碼通過路由到正確的 URL 路徑來從網頁呈現適當數量的卡片：
Home.js
<div className="btn-group">
<Link to='/play/8'>
<button className="btn">8 cards</button>
</Link>
<Link to='/play/16'>
<button className="btn">16 cards</button>
</Link>
<Link to='/play/24'>
<button className="btn">24 cards</button>
</Link>
<Link to='/play/32'>
<button className="btn">32 cards</button>
</Link>
</div>
每當我進行初始渲染并例如選擇“24 張卡片”按鈕時，一切都很好，32 張卡片中有 24 張按原樣顯示，但是當我回傳“主頁”并在這種情況下選擇更高價值的卡片時“32 張卡片”按鈕將顯示 32 張卡片，瀏覽器將僅顯示 24 張卡片而不是 32 張。我該如何解決？
uj5u.com熱心網友回復：
使用此代碼：
let tempDeck = deck;
tempDeck.splice(number, deck.length);
您正在編輯原始陣列。
您應該考慮創建原始陣列的淺表副本并對其進行編輯：
let tempDeck = [...deck];
tempDeck.splice(number, deck.length);
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/345098.html
標籤：javascript 反应 反应钩子 使用效果 使用状态
上一篇：時刻格式回傳“無效日期”
下一篇：如何映射嵌套物件