ReactJS：不同事件之间的setState问题

编程问答 2022-08-10

问题描述

学习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 (将#修改为@）

javascriptreact-hooksreact-statereactjsreactjs