javascript - 反应钩子停止自我更新

Question

我正在制作一个轮盘游戏，此时代码打印一个随机数，保存它然后再次生成随机数。有几种状态会打印其他信息，例如在第一行中获胜，在第二行中获胜等。代码工作了一段时间，但突然停止自我更新，我尝试过超时（注释代码），但同样发生了。有人可以帮我吗？

const getRandomIntInclusive = (min, max) =>{
    const randomBuffer = new Uint32Array(1);
    window.crypto.getRandomValues(randomBuffer);

    let randomNumber = randomBuffer[0] / (0xffffffff + 1);

    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(randomNumber * (max - min + 1)) + min;
}

const numberColors = {
    black : [15, 4, 2, 17, 6, 13, 11, 8, 10, 24, 33, 20, 31, 22, 29 , 28 , 35, 26],
    red : [32, 19, 21 , 25, 34, 27, 36, 30, 23, 5, 16, 1, 14, 9, 18, 7, 12, 3],
    green : [0]
}
const firstLine = [
    3, 6, 9, 12, 15, 18, 21, 24, 27, 30, 33, 36 
]
const secondLine = [
    2, 5, 8, 11, 14, 17, 20, 23, 26, 29, 32, 35
]
const thirdLine = [
    1, 4, 7, 10, 13, 16, 19, 22, 25, 28, 31, 34

]
const cero = [0];

/**Muestra los resultados de una ruleta implementada en js */
const Roulette = props =>{
    const useStyles = makeStyles({

    });
    const classes = useStyles();
    const [wins, setWins] = useState({firstLine : [], secondLine : [], thirdLine : [], cero : []});
    const [randomNumber, getRandomNumber] = useState(()=>getRandomIntInclusive(0,36));
    const [numberResults, setNumberResults] = useState([]);

    useEffect(()=>{
        //añado el número a la colección

//REVISAR QUE EL NÚMERO ESTÉ EN LA LÍNEA Y DE SER ASÍ SUMAR LAS VECES QUE SE VA GANANDO
const updatedValue = {...wins};

        if(firstLine.includes(randomNumber)){
            //setWins(wins.firstLine.push(randomNumber));
            updatedValue.firstLine.push(randomNumber);
            setWins(updatedValue);
        }
        if(secondLine.includes(randomNumber)){
           // setWins(wins.secondLine.push(randomNumber));
         updatedValue.secondLine.push(randomNumber);
            setWins(updatedValue);
        }
        if(thirdLine.includes(randomNumber)){
           updatedValue.thirdLine.push(randomNumber);
           setWins(updatedValue);
           
        }
        if(cero.includes(randomNumber)){
            updatedValue.cero.push(randomNumber);
            setWins(updatedValue);
            
         }

         const numberResultsUptadedValue = [...numberResults];
         numberResultsUptadedValue.push(randomNumber);
         setNumberResults(numberResultsUptadedValue);


}, [randomNumber]);

    useEffect(()=>{
         const random = getRandomIntInclusive(0,36);
       /*const timeout = setTimeout(()=>{
            getRandomNumber(random);  

            console.log('randomNumber generated')

        }, 100);*/
        getRandomNumber(random); 
       // return ()=>clearTimeout(timeout);
    },[numberResults])

   


    
    
    return(
        <Grid container direction='column' >
                <Typography variant="h3">Roulette</Typography>
                <Grid container>
                <Typography variant="h5">Random Number: </Typography>
                <Typography variant="body1" style={{ color : 'yellow'}}> {randomNumber}</Typography>
                <Typography variant="h5">Length </Typography>
                <Typography variant="body1" style={{ color : 'yellow'}}> {numberResults.length}</Typography>
                <Typography variant="h5">Wins in first line </Typography>
                <Typography variant="body1" style={{ color : 'orange'}}> {wins.firstLine.length}</Typography>
                <Typography variant="h5">Wins in second line </Typography>
                <Typography variant="body1" style={{ color : 'orange'}}> {wins.secondLine.length}</Typography>
                <Typography variant="h5">Wins in third line </Typography>
                <Typography variant="body1" style={{ color : 'orange'}}> {wins.thirdLine.length}</Typography>
                <Typography variant="h5">Wins in cero </Typography>
                <Typography variant="body1" style={{ color : 'orange'}}> {wins.cero.length}</Typography>
                </Grid>
                <Grid container>
                <Typography variant="h5">List of Numbers : </Typography>
    {numberResults.length > 0 ? numberResults.map((el)=>{
           return Object.keys(numberColors).map((currentColor)=>{
                if(numberColors[currentColor].includes(el)){
                  let  winBet = null;
                  let dinamicStyle = {  color : currentColor, border : 'solid 1px black', width : '20px', height : '20px' }
                    //const winBet = firstLine.includes(el) ?  <InsertEmoticonIcon /> : null;
                    if(firstLine.includes(el) ){
                        winBet = <InsertEmoticonIcon /> ;
                        dinamicStyle.backgroundColor = 'yellow';
                    }
                    return(
                        <React.Fragment>
                        <Typography key={uuidv4()} align='center' variant="body1" style={dinamicStyle}> {el}  </Typography>
                        </React.Fragment>
                    )
                }
                return null; 
              
           }
);
    }) : null}
                </Grid>
                
        </Grid>
    )
}

export default Roulette;

标签： javascriptreactjsreact-hooks

Answer 1

我可以通过检查 numbersArray 中的最后一个值是否与生成的最后一个随机数相同（正如 Jason 在评论部分中评论的那样）来解决这个问题，如果是，则更改依赖项列表中的布尔状态，再次触发更新。

...[randomNumber, effectOnSameValue]);

 useEffect(()=>{
         const random = getRandomIntInclusive(0,36);
        const last = numberResults[numberResults.length - 1]
        getRandomNumber(random); 

        if(last === random){
            runEffectOnSameValue(!effectOnSameValue);
        }
    },[numberResults])