【发布时间】：2021-01-31 20:52:22
【问题描述】：
我正在尝试使用 React 制作一个简单的“Nonogram”/“Picross”游戏来学习 UseContext 和 UseReducer，但我很困惑为什么我的顶级组件（应用程序）在它使用的值发生变化时没有重新渲染。也许我遗漏了一些基本的东西，但我已经在线阅读了文档和示例，但不明白为什么它没有重新渲染。
期望：用户打开应用程序，点击方块来更改它们的值（通过点击方块画一个十字），并且板下方的文本显示“恭喜！”，因为它基于值'完成'
问题：如上，但“继续尝试”仍然存在。
我也添加了一个按钮来查看在 UseReducer 函数中定义的 boardState。
代码如下：
App.js
import './App.css';
import { useReducer } from 'react';
import Table from './Table';
import BoardContext from './BoardContext';
import boardReducer from './BoardReducer';
function App() {
//Puzzle layout
const puzzleArray = [
[true, false, true],
[false, true, false],
[true, false, true]
];
//Creating a set of blank arrays to start the game as the userSelection
const generateUserSelection = () => {
const userSelection = [];
puzzleArray.forEach(row => {
let blankRow = [];
row.forEach(square => {
blankRow.push(false)
});
userSelection.push(blankRow);
})
return userSelection;
};
//Initial Context value
const boardInfo = {
puzzleName: "My Puzzle",
puzzleArray: puzzleArray,
userSelection: generateUserSelection(),
isComplete: false
};
const [ boardState, dispatch ] = useReducer(boardReducer, boardInfo)
return (
<BoardContext.Provider value={{board: boardState, dispatch}}>
<div className="App">
<header className="App-header">
<p>
Picross
</p>
<Table />
</header>
<div>
{boardState.isComplete ?
<div>Congratulations!</div>
: <div>Keep trying</div>
}
</div>
<button onClick={() => console.log(boardState)}>boardState</button>
</div>
</BoardContext.Provider>
);
}
export default App;
Table.jsx：
import { useContext, useEffect } from 'react';
import './App.css';
import Square from './Square';
import BoardContext from './BoardContext';
function Table() {
useEffect(() => {console.log('table useEffect')})
const { board } = useContext(BoardContext);
const generateTable = solution => {
const squareLayout = []
for (let i = 0; i < solution.length; i++) {
const squares = []
for (let j = 0; j < solution[i].length; j++) {
squares.push(
<Square
position={{row: i, column: j}}
/>
);
};
squareLayout.push(
<div className="table-row">
{squares}
</div>
);
};
return squareLayout;
};
return (
<div className="grid-container">
{generateTable(board.puzzleArray)}
</div>
);
}
export default Table;
Square.jsx
import { useContext, useState } from 'react';
import './App.css';
import BoardContext from './BoardContext';
function Square(props) {
const { board, dispatch } = useContext(BoardContext)
const [ isSelected, setIsSelected ] = useState(false);
const { position } = props;
const handleToggle = () => {
console.log(board)
board.userSelection[position.row][position.column] = !board.userSelection[position.row][position.column]
dispatch(board);
setIsSelected(!isSelected);
}
return (
<div className={`square ${isSelected ? " selected" : ""}`}
onClick={handleToggle}
>
{position.row}, {position.column}
</div>
);
}
export default Square;
谢谢
编辑：我知道对于像这样的简单应用程序，通过 props 传递状态非常容易，但想法是练习其他钩子，所以想避免它。我在这方面实践的想法理想情况下可以扩展到未来更大的项目。
编辑 2：根据要求，这是我的 BoardReducer.js 文件：
const boardReducer = (state, updateInfo) => {
let isComplete = false;
if (JSON.stringify(updateInfo.userSelection) === JSON.stringify(state.puzzleArray)) {
isComplete = true;
}
updateInfo.isComplete = isComplete;
return updateInfo;
}
export default boardReducer;
（使用 JSON.stringify 作为检查匹配数组的一种廉价方法，因为它现在只是一个小方法！）
【问题讨论】：
-
看起来你正在改变你的状态。此外，
dispatch应该使用一个动作创建者，而不是你的变异状态对象。您能否更新您的问题以包括您的动作创建者（如果有的话？）和板减速器功能？ -
已更新以包括我的 baordReducer。从您的评论中，我猜我对如何使用减速器功能有错误的看法，因为我没有使用任何“动作创建者”？
标签： javascript reactjs react-hooks use-context use-reducer