如何解决ReactJS:不同事件之间的setState问题
学习React和JS,我正在尝试制作一个简单的React应用,该应用显示一个网格并对多个事件做出反应。
有2个事件:用户可以单击(蓝色)网格中的一个单元格,然后应将当前XPos / YPos移至红色,然后再次将其变为蓝色,这似乎可以正常工作。
另一种方法是按一个键来移动当前XPos / YPos(例如k = right / j = right / up / down)。
我添加了keypress事件,但它似乎对XPos / YPos使用了另一个“新”状态(传入的XPos / YPos始终为10,10,这是初始setState值,而不是“当前/移动”值,有趣的是,我确实在10,11上看到一个红点,并与上一个鼠标单击位置的位置结合在一起(因此,数组的状态显然正确地更新了,非常令人困惑。
import React,{useState,useEffect} from 'react';
export default function Grid(props)
{
let initMatrix=[];
const [XPos,setXPos]=useState(10);
const [YPos,setYPos]=useState(10);
const Init = (rows,cols)=>
{
for (let r=0; r<rows; r++)
{
// create row
initMatrix.push([]);
for (let c=0; c<cols; c++)
{
// add a cell / color
initMatrix[r].push("blue");
}
}
}
Init(props.rows,props.cells);
initMatrix[YPos][XPos]='red';
const [matrix,setMatrix]=useState(initMatrix);
const onClicked = (row,col)=> {
console.log(`onClicked: ${YPos}${XPos}`)
let myMatrix=[...matrix];
myMatrix[YPos][XPos]='blue';
setXPos(col);
setYPos(row);
myMatrix[row][col]='red';
setMatrix(myMatrix);
}
const useKeyPress = (key,action) => {
useEffect(() => {
function onKeyup(e) {
if (e.key === key) action();
}
window.addEventListener("keyup",onKeyup);
return () => window.removeEventListener("keyup",onKeyup);
},[]);
}
const doRight = () => {
console.log(`doRight: ${YPos}${XPos}`) // always prints 10 10
let myMatrix=[...matrix];
myMatrix[YPos][XPos]='blue';
myMatrix[YPos][XPos+1]='red';
// this "+1" does not seem to 'stick',// everytime i press "k" it's back at position 10,10 and moves to 10,11
setXPos(XPos+1);
setMatrix(myMatrix); // the matrix does update (i see the a red cell of last click and cell 10,11 is red - 10,10 is back to blue)
};
const goRight= useKeyPress('k',doRight);
return(
<div className ="grid">
{
matrix.map((row,rowidx)=>
<div className="grid-row">{
row.map((cell,colidx)=>
<div key={rowidx+"-"+colidx} className={cell} onClick={x=>onClicked(rowidx,colidx)}>{rowidx},{colidx}
</div>)}
</div>)
}
</div>
);
}
我还看到每次单击鼠标一次,我的Grid()都会被调用两次。
有趣的是:当我在外部而不是在钩子上使用onKeyDown并从那里调用goRight时,它的工作正常,因此我认为它与useKeyPress级别有关,但不清楚是什么问题,并且useKeyPress钩子样式似乎成为更“实际的方式”。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。