我用带有setTimeout函数的Java脚本编写了随机数生成器的代码.代码如下所示.

 const [number, setnumber] = useState();
      function randomNumber() {
        let number1 = Math.floor(Math.random() * 21 + 1);
        setnumber(number1);
      }
      setInterval(() => {
        randomNumber();
      }, 6000);

但它在几秒钟后就会无限地随机化.

enter image description here

要求在20秒超时后生成数字,并在接下来的4秒内保持随机化数字,直到时钟重置为零.

循环是连续的

  <CircularProgress
            trackColor="inherit"
            capIsRound
            thickness={'6px'}
            className="circlular progress"
            value={80}
            size={'500px'}
            color={'#20fc94'}
            alignItems={'center'}
            justifyContent={'center'}
            display={'flex'}
          >
            <CircularProgressLabel
              className="circlular progress lable"
              borderRadius={'full'}
              alignItems={'center'}
              justifyContent={'center'}
              display={'flex'}
            >
              <Stack
                border={'5px solid #20FC9D'}
                borderRadius={'full'}
                h={'385px'}
                w={'385px'}
                align={'center'}
                justify={'center'}
              >
                <Stack
                  border={'5px solid #13cee6'}
                  borderRadius={'full'}
                  h={'350px'}
                  w={'350px'}
                  boxShadow={'0 0 25px #13cee6'}
                  align={'center'}
                  justify={'center'}
                >
                  <Stack
                    className="text"
                    h={'full'}
                    w={'full'}
                    p={'12'}
                    align={'center'}
                    justify={'center'}
                  >
                    <Text
                      flex={'2'}
                      h={'fit-content'}
                      w={'fit-content'}
                      fontSize={'1.4em'}
                      background={
                        'radial-gradient(circle, rgba(201,18,191,1) 0%, rgba(134,40,206,1) 51%)'
                      }
                      backgroundClip={'text'}
                      style={{ WebkitTextStroke: '1px #20fc9d' }}
                    >
                      {number}
                    </Text>
                    <Text flex={'2'} color={'#FCA120'} px={'4'} fontSize={'md'}>
                      Will the next number be Higher or Lower
                    </Text>
                  </Stack>
                </Stack>
              </Stack>
            </CircularProgressLabel>
          </CircularProgress>

下面是循环进度和数字生成器函数调用的代码.

推荐答案

将setInternal包装在Use Effect挂钩中.

   useEffect(()=>{
        setInterval( ()=> setnumber(Math.floor(Math.random * 20 + 1)),
    6000);
    },[]);

Javascript相关问答推荐

在服务器上放置了Create Reaction App Build之后的空白页面

还原器未正确更新状态

Jest toHaveBeenNthCalledWith返回当前设置的变量值,而不是调用时的值

如何使用<;Link>;执行与JS Reaction中的";window.Location=/GameOverDied;";类似的操作?

将嵌套数组的元素乘以其深度,输出一个和

Socket.IO在刷新页面时执行函数两次

Reaction useState和useLoaderData的组合使用引发无限循环错误

未捕获的不变违规:即使在使用DndProvider之后也应使用拖放上下文

rxjs在每次迭代后更新数组的可观察值

当S点击按钮时,我如何才能改变它的样式?

ReactJS Sweep Line:优化SciChartJS性能,重用wasmContext进行多图表渲染

如何从嵌套的json中获取最大值

ReactJS扫描线演示:多个曲面未同时更新的问题

从C#的Angular 来看,Java回调基础知识

Vue3合成API.来自本地存储的对象始终返回UNDEFINED

从对象数组上载图像(多个)

ReactJS:根据AXIOS开机自检结果以红色/绿色背景显示状态

从Java到Java的Port Inn代码验证

在Quill中,如何解析delta并替换其中的一些内容

如何隐藏SELECT中的第一个选项