Question

在触发onClick事件后，我调用了setInterval函数，该函数依次调用一个函数来设置从4个值（4种不同颜色）的数组中随机选择的变量的值。我需要跟踪随机选择了哪些值。当我尝试通过将useState挂钩返回的getter变量的值推送到colortracker数组中时，在控制台中看到它仅在数组中存储空字符串。

我尝试传递bgCol变量作为props值。我试过bgCol的花括号。尝试用关键字let和var定义我的数组。

function ColoredBox(props){

    return(
      <div style={{backgroundColor: props.color, marginBottom: 20, width: 
       200, height: 200}}>      
      </div>
    );
}

function Button(props){
    const start = () => {
        setInterval(props.startGame, 2000);
        }
    return(
        <button onClick={start} style={{marginBottom: 50}} >Start 
        Game</button>
  );
}



function Game(){
    const [bgCol, setbgCol]= useState('');
    const arr = ['red', 'blue', 'yellow', 'black'];
    const colortracker = [];     
    const handleClick = () => {     

        setbgCol(arr[Math.floor(Math.random()*Math.floor(4))]);
        colortracker.push(bgCol); 
        console.log(colortracker);    

    }
        return(
        <div>
            <ColoredBox color={bgCol} />
            <Button startGame={handleClick} />
        </div>
            );
      }

ReactDOM.render(<Game />,mountNode);

实际输出是一个数组，其中用空字符串填充bgCol的值，当我需要它是代表从arr数组中选取的颜色的字符串时。

Answer 1

也许您的handleClick正在获取bgCol的第一个值，该值为空字符串

尝试

const handleClick = () => {

        const randomBgCol = arr[Math.floor(Math.random()*Math.floor(4))];
        setbgCol(randomBgCol);
        colortracker.push(randomBgCol); 

        console.log(colortracker);    
    }

Answer 2

setState是异步的，这可能是一个问题。（状态在之后调用setState之后发生变化，不一定在 right 之后发生变化。）

您可以在handleClick中使用局部变量：

    const color = arr[Math.floor(Math.random()*Math.floor(4))]
    setbgCol(color);
    colortracker.push(color); 
    console.log(colortracker);

如何将useState变量中的当前值存储在数组中？

2 个答案: