我正在使用 React 制作井字游戲，我對我的狀態如何更新感到困惑。我正在使用鉤子。
我有一個包含 9 個物件的狀態陣列，每個物件都具有屬性“num”（從 0 到 8）和一個空字串用于“val”。當一個正方形被點擊時，取決于誰是活動的，我希望正方形的值已經更新為“X”或“O”。
為此，我假設我必須使用擴展運算子并用我新更新的陣列更新我的狀態，但我不是，我使用方括號來選擇我想要的正方形，并根據情況為其分配一個新值播放器上。
我只是想知道如何，我不明白我的狀態如何更新，你可以在我的代碼中看到我已經注釋掉了擴展運算子的使用，因為它意識到它似乎沒有必要。邏輯在我的 clickHandler 中。任何解釋或資源對我理解這一點都很方便，謝謝。應用程式.js
import React from 'react';
import { useState } from 'react'
import Square from './components/Square'
// possible winning rows
// switch between player 1 and 2
// reset button
const App = () => {
const [playerX, setPlayerX] = useState([])
const [playerO, setPlayerO] = useState([])
// false = playerX
const [activePlayer, setActivePlayer] = useState(false)
const [square, setSquare] = useState([
{ num: 0, val: '' },
{ num: 1, val: '' },
{ num: 2, val: '' },
{ num: 3, val: '' },
{ num: 4, val: '' },
{ num: 5, val: '' },
{ num: 6, val: '' },
{ num: 7, val: '' },
{ num: 8, val: '' }
])
const clickHandler = (squareItem) => {
// square clicked
// let newSquares = [...square]
const squareUpdate = square[squareItem.num]
// check active player
if(activePlayer) {
// push square num to player array
setPlayerO([...playerO, squareItem.num ])
// change square value
squareUpdate.val = "O"
// update state array with changed
// setSquare([...newSquares])
setActivePlayer(!activePlayer)
}else {
// add square num to player array
setPlayerX([...playerX, squareItem.num ])
// change square value
squareUpdate.val = "X"
// update state array with changed
// setSquare([...newSquares])
setActivePlayer(!activePlayer)
}
}
return (
<div id="game">
<h1>Tic - Tac - Toe</h1>
<div id="grid">
{square.map((squareItem, index) => {
return <Square
activePlayer={activePlayer}
squareItem={squareItem}
clickHandler={clickHandler}
/>
})}
</div>
</div>
)
}
export default App
Square.js
import React from 'react'
const Square = ({ squareItem, clickHandler }) => {
return (
<div
onClick={() => clickHandler(squareItem)}
className="square"
value={squareItem.value}>
{squareItem.num}
</div>
)
}
export default Square
uj5u.com熱心網友回復：
Square 是任何陣列，由實體而不是值參考。因為您呼叫了另一個 setState (setActivePlayer)，所以 react 會使用square更改的值重新渲染組件，但它仍然是相同的物件參考，因此具有更新的值。
如果您洗掉其他 setState 呼叫并僅設定它不會重新呈現的物件值。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/513975.html
上一篇：試圖將我的JSON轉換為字串但得到[objectObject]
下一篇：如何將陣列轉換為物件陣列中的物件