我有一个4个正方形，其中每个正方形都有各自的状态。附加到每个方块的是一个动态事件处理程序，它将递增它们各自的状态。我没有正确实现动态逻辑，因为点击方块按钮时状态不会增加。我做错了什么？
export const Board = () => {
const [squares, setSquares] = useState({
squareOne: 0,
squareTwo: 0,
squareThree: 0,
squareFour: 0
});
const handleIncrement = (event) => {
const {
target: { name, value }
} = event;
setSquares({ ...squares, [name]: value + 1 });
};
return (
<div className="board">
<Square value={squares.squareOne} increment={handleIncrement} />
<Square value={squares.squareTwo} increment={handleIncrement} />
<Square value={squares.squareThree} increment={handleIncrement} />
<Square value={squares.squareFour} increment={handleIncrement} />
</div>
);
};
export const Square = ({ value, increment }) => {
return <button onClick={increment}>{value}</button>;
};
export const Board = () => {
const [squares, setSquares] = useState({
squareOne: 0,
squareTwo: 0,
squareThree: 0,
squareFour: 0
});
const handleIncrement = (name) => () => {
setSquares({ ...squares, [name]: squares[name] + 1 });
};
return (
<div className="board">
<Square value={squares.squareOne} increment={handleIncrement('squareOne')} />
<Square value={squares.squareTwo} increment={handleIncrement('squareTwo')} />
<Square value={squares.squareThree} increment={handleIncrement('squareThree')} />
<Square value={squares.squareFour} increment={handleIncrement('squareFour')} />
</div>
);
};
export const Square = ({ value, increment }) => {
return <button onClick={increment}>{value}</button>;
};
您没有使用name属性。在解决方案句柄中，Increment取名称并返回一个函数，该函数将通过使用"；"闭包"；。这样，您的代码将正常工作。
如果你有指定的平方数，你最好有这个：
export const Board = () => {
const [squareOne, setSquareOne] = useState(0)
const [squareTwo, setSquareTwo] = useState(0)
const [squareThree, setSquareThree] = useState(0)
const [squareFour, setSquareFour] = useState(0)
return (
<div className="board">
<Square value={squareOne} increment={() => setSquareOne(squareOne + 1)} />
<Square value={squareTwo} increment={() => setSquareTwo(squareTwo + 1)} />
<Square value={squareThree} increment={() => setSquareThree(squareThree + 1)} />
<Square value={squareFour} increment={() => setSquareFour(squareFour + 1)} />
</div>
);
};
export const Square = ({ value, increment }) => {
return <button onClick={increment}>{value}</button>;
};
否则，若你们的方块数是动态的，你们可以这样做：
export const Board = () => {
const [squares, setSquares] = useState([
{ id: 1, value: 0 },
{ id: 2, value: 0 },
{ id: 3, value: 0 },
{ id: 4, value: 0 }
]);
const handleIncrement = (id) => {
const targetSquare = squares.find(s => s.id === id)
targetSquare.value = targetSquare.value + 1;
setSquares([...squares])
}
return (
<div className="board">
{squares.map((s, i) => <Square key={i} value={s.value} increment={() => handleIncrement(s.id)} />)}
</div>
);
};
export const Square = ({ value, increment }) => {
return <button onClick={increment}>{value}</button>;
};
这是我的喜好，随便怎么做都可以。