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

Question

在 onClick 事件触发后，我调用 setInterval 函数，该函数又调用一个函数来设置从 4 个值(4 种不同颜色)的数组中随机选取的变量的值。我需要跟踪随机选择的值。当我尝试通过将 useState Hook 返回的 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);    
    }