我相信這對一些人來說并不奇怪，但我在以下組件中得到了一些非常意想不到的東西：
const GameBoard = ({
moves = [[1,2]]
}:Props) => {
const [sideLength, setSideLength] = useState(3);
let rows = Array(sideLength).fill(Array(sideLength).fill(''));
console.log(rows);
for(let i = 0; i < moves.length; i ){
const [y,x] = moves[i];
const mark:Mark = i % 2 === 0 ? 'X' : 'O';
rows[y][x] = mark;
}
console.log(rows);
return (
<div className="game-board">
{ rows.map(row => <Row row={row}/>)};
</div>
);
};
這個組件代表一個井字游戲板。一個被呼叫的道具moves應該確定在板上做標記的位置。在下面的行中，我從一個空白板開始：
let rows = Array(sideLength).fill(Array(sideLength).fill(''));
然后我用基于 的標記填充行moves。 [[1,2]]表示只進行了第一步（根據規則為 X），并且它被放置在 1 下和 2 上。
我希望console.log之后let rows...記錄：
[ '', '', '']
['', '', '']
['', '', '']
相反，此行和 for 回圈之后的日志都記錄以下內容： 0 ：
['', '', 'X']
['', '', 'X']
['', '', 'X']
所以我的問題是：
- 為什么第一個日志不是只有空字串？
- 為什么填充第二個日志的一整列而不是一個正方形（[2,1]）？
https://codesandbox.io/s/muddy-bash-shdpoi?file=/src/App.js
uj5u.com熱心網友回復：
回覆。1：確實如此！您可能面臨的問題是您正在瀏覽器中查看控制臺。在那里，列印物件的內容可能會在列印到控制臺后發生變化。如果不是console.log(rows)您使用console.log(JSON.stringify(rows))，您會發現它實際上是您所期望的（所有空字串）。
回覆。2：這是因為您正在使用相同的陣列初始化所有三個頂級陣列元素（這是一個參考！）。這甚至顯示在 Array.fill 方法的 MDN 檔案中，https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill#using_fill ：
// A single object, referenced by each slot of the array:
const arr = Array(3).fill({}); // [{}, {}, {}]
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]
您需要創建三個不同的陣列來填充頂級陣列。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/532349.html
標籤：反应数组