英文:
Nested array not rerendering in React even using spread operator
问题
我正在使用React制作数独游戏，但当我点击一个单元格来更新它时，组件没有重新渲染。数独棋盘是一个二维数组。我使用了扩展运算符来创建数组的副本，但似乎没有起作用。如果我使用console.log查看，二维数组的更新是正确的。
export default function NineSquare() {
const cube = Array(9).fill('X');
const blankSquares = Array(9).fill(cube);
const [board, setBoard] = useState(blankSquares);
const [currentSquare, setCurrentSquare] = useState(null);
const [chosen, setChosen] = useState();
function setCell(val) {
if (chosen) {
let outer = Number(chosen.split('-')[0].slice(1));
let inner = Number(chosen.split('-')[1]);
let newBoard = [...board];
newBoard[outer] = [...newBoard[outer]];
newBoard[outer][inner] = val;
setBoard(newBoard);
}
}
const bigBoard = blankSquares.map((item, index1) => {
const squareId = shortid.generate();
const sudokuRow = item.map((cell, index2) => {
const cellId = shortid.generate();
return <td className={`_${index1}-${index2}`} key={`${index1}-${index2}`} onClick={(e) => setChosen(e.target.className)}>{cell}</td>;
});
return <tbody className={`square${index1}`} key={index1}><tr key={index1}>{sudokuRow}</tr></tbody>;
});
return (
<>
<table className="board">{bigBoard}</table>
<Numbers setCell={setCell}/>
</>
);
}
我还尝试过使用JSON.parse(JSON.stringify(board))创建一个新数组，但没有任何变化。
英文:
I am making a sudoku game using React, and when I am clicking on a cell to update it, the component does not rerender. The sudoku board is an array of arrays. I am using the spread operator to create a copy of the array, but that is not doing anything. If I console.log to see, the array of arrays is updated properly.
export default function NineSquare() {
const cube = Array(9).fill('X');
const blankSquares = Array(9).fill(cube);
const [board, setBoard] = useState(blankSquares);
const [currentSquare, setCurrentSquare] = useState(null);
const [chosen, setChosen] = useState();
function setCell(val) {
if (chosen) {
let outer = Number(chosen.split('-')[0].slice(1));
let inner = Number(chosen.split('-')[1]);
let newBoard = [...board];
newBoard[outer] = [...newBoard[outer]];
newBoard[outer][inner] = val;
setBoard(newBoard);
}
}
const bigBoard = blankSquares.map((item, index1) => {
const squareId = shortid.generate();
const sudokuRow = item.map((cell, index2) => {
const cellId = shortid.generate();
return <td className={`_${index1}-${index2}`} key={`${index1}-${index2}`} onClick={(e) => setChosen(e.target.className)}>{cell}</td>
})
return <tbody className={`square${index1}`} key={index1}><tr key={index1}>{sudokuRow}</tr></tbody>
})
return (
<>
<table className="board">{bigBoard}</table>
<Numbers setCell={setCell}/>
</>
)
}
I also tried creating a new array using JSON.parse(JSON.stringify(board)) but nothing happened.
答案1
得分: 1
你正在使用blankSquares来映射渲染项，这是初始数组。
const bigBoard = blankSquares.map((item, index1) => {
// 返回渲染项
})
尝试使用board代替，以便渲染最新的内容。
const bigBoard = board.map((item, index1) => {
// 返回渲染项
})
英文:
You're using blankSquares to map the render items, which is the initial array.
const bigBoard = blankSquares.map((item, index1) => {
// return render items
})
Try to use board instead so that the latest content will be rendered.
const bigBoard = board.map((item, index1) => {
// return render items
})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论