我有一個渲染陣列的組件.map()和一個按鈕，它setState的洗牌版本。
每次單擊該按鈕時，我都會嘗試更新它，但事實并非如此。
const Home: NextPage = () => {
const [random, setRandom] = useState(students);
function randomize() {
const shuffle = students.sort(() => 0.5 - Math.random());
setRandom(shuffle);
}
return (
<>
<main className="container mx-auto flex min-h-screen flex-col items-center justify-center p-4">
<h1 className="text-6xl font-bold">This week's seat</h1>
<button onClick={randomize}>Shuffle</button>
{/* Seatings */}
<div className="seatbox">
{random.map((student) => (
<Seat key={student}>{student}</Seat>
))}
</div>
</main>
</>
);
};
我試圖記錄random狀態，它得到了更新，只是可能沒有被渲染。
該Seat組件由 styled-components 組成，students陣列是一個字串陣列，學生姓名如下
const students = [
"Joe",
"Jason"
]
uj5u.com熱心網友回復：
這對陣列進行排序：
const shuffle = students.sort(() => 0.5 - Math.random());
但是......它對陣列進行排序并回傳對同一陣列的參考。由于參考相等性沒有改變（陣列畢竟是一種物件），React 無法知道狀態是否已更新。它不做任何深度比較，只是對發送給它的任何內容進行相等比較。
如果在排序之前復制陣列（以免改變它），新排序的陣列將是一個新的物件參考，并且不會“等于”之前的狀態：
const shuffle = [...students].sort(() => 0.5 - Math.random());
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/527407.html
上一篇：匹配兩個陣列并合并它們比較JavaScript中的鍵值
下一篇：在發送給客戶端之前修改回應