类型错误：无法读取未定义的属性“10”

Question

为什么第 17 行出现错误 TypeError: Cannot read property '10' of undefined？我正在构建一个战舰项目，每次点击后，每个框都会将颜色更改为另一种颜色，因为它就像那个地方得到射击一样。但是在我尝试查找 currentGrid 之后，我在第 17 const position = currentGrid[x][y]; 行收到了这个错误。

import React, {useEffect  ,useState} from 'react'
import Ship from '../components/ShipGenerate.js'
import '../style/style.css'



function Grid(props) {
    const emptyGrid = new Array(10);
    for (let i = 0; i < emptyGrid.length; i += 1) {
        emptyGrid[i] = new Array(10).fill(0);
    }

    const [grid, setGrid] = useState(emptyGrid);

    function togglePieceStatus(x, y) {
        setGrid(currentGrid => {
            const position = currentGrid[x][y];
            currentGrid[x][y] = position === 0 ? 1 : 0;
            return currentGrid;
        });
    }

    const box = [];
    for (var x = 0; x < grid.length; x++) {
        for (var y = 0; y < grid.length; y++) {
            const className = grid[x][y] === 0 ? 'piece' : 'boom';
            box.push(
                <div>
                    <div
                        className={className}
                        onClick={() => togglePieceStatus(x, y)}
                    ></div>
                </div>
            );
        }
    }

    return (
        <div>
            <div className="box">{box}</div>
        </div>
    );
}

export default Grid

Answer 1

问题

在双 for 循环中使用 var 会改变传递给 x 回调的 y 和 togglePieceStatus 值。

function togglePieceStatus(x, y) {
    setGrid(currentGrid => {
        const position = currentGrid[x][y];
                                       ^ error points here
        currentGrid[x][y] = position === 0 ? 1 : 0;
        return currentGrid;
    });
}

每个回调都从循环计数器最终迭代接收到一个变化的 x、y 值，从 x++ 和 y++ 变为 10。 currentGrid[x] 被评估为 currentGrid[10] 未定义并在尝试访问 y 索引时抛出错误。

解决方案

使用 let 以便将它们的范围正确地限定在 for 循环的每次迭代中，而不是被提升。

const box = [];
for (let x = 0; x < grid.length; x++) {
  for (let y = 0; y < grid.length; y++) {
    const className = grid[x][y] === 0 ? "piece" : "boom";
    box.push(
      <div>
        <div className={className} onClick={() => togglePieceStatus(x, y)}>
          {x},{y}
        </div>
      </div>
    );
  }
}