Reactjs 提交表单时模拟时钟应用程序状态停止

我正在开发这个React应用程序，使用户可以使用带有可选输入的模拟时钟来更改时钟指针、时钟边框等的颜色

但有时当我试着按下提交按钮时，秒针突然停止移动，似乎“时间”状态没有改变。但是，颜色总是按照预期的方式改变，因此颜色状态也会改变

我试图合并preventDefault（），但这是不可能的

第一个代码段定义了钩子，第二个是表单，第三个是主appjs文件。我没有包含包含转换和样式信息的JS/CSS文件

import { useEffect, useRef } from 'react';
 
export const useInterval = (callback, delay) => {
    const savedCallback = useRef()

    // Remembers latest callback
    useEffect(() => {
        savedCallback.current = callback
    }, [callback])

    //Set-up the interval
    useEffect(() => {
        const tick = () => {
            savedCallback.current()
        }
        if (delay !== null) {
            let id = setInterval(tick, delay)
            return () => clearInterval(id)
        }
    }, [delay])
}

import React，{useState}来自“React”；
导入“/App.css”；
导入“./CustomForm.css”；；
功能自定义表单（道具）{
const[options，setOptions]=useState（props.defaultOptions）
常量setClockColor=（事件）=>{
event.preventDefault（）；
让clockColors={…options.clockColors}；
clockColors[event.target.name]=event.target.value；
setOptions（{…options，clockColors}）；
}
const buildClock=（事件）=>{
event.preventDefault（）；
setTimeout（（）=>props.updateLock（选项），1000）；
}
返回(
构建时钟（事件）}>
自定义模拟时钟
提交
)
}
导出默认自定义表单；

import React，{useState}来自“React”；
从“./Hook”导入{useInterval}；
从“/Components”导入{ClockBase、Center、SecondHand、MinuteHand、HourHand}；
从“/CustomForm”导入CustomForm；
导入“./App.css”
常量应用=（）=>{
const date=新日期（）；
常量[秒，设置秒]=使用状态（0）
const[minutes，setMinutes]=useState（0）
常数[hours，setHours]=useState（0）
const[options，setOptions]=useState({
时钟颜色：{
第二,"绿色",，
分钟：“蓝色”，
小时：“红色”，
边框：“灰色”，
基地：“黑色”
}
})
const updatelock=（新选项）=>{
setOptions（{…新选项}）；
}
useInterval（（）=>{
设置秒（date.getSeconds（））
setMinutes（date.getMinutes（））
设置小时数（date.getHours（）%12 | | 12）
}, 1000 )
返回(
)
}
导出默认应用程序；

我不确定为什么在buildClock函数的setTimeout内需要1000毫秒的延迟？我以为延迟可以解决问题，但看起来没有

import React, { useState } from 'react';
import './App.css';
import './CustomForm.css';;

function CustomForm(props) {
    const [options, setOptions] = useState(props.defaultOptions)

    const setClockColor = (event) => {
        event.preventDefault();
        let clockColors = { ...options.clockColors };
        clockColors[event.target.name] = event.target.value;
        setOptions({ ...options, clockColors });
    }

    const buildClock = (event) => {
        event.preventDefault();
        setTimeout(() => props.updateClock(options), 1000);
        
    }

    return (
        <form onSubmit={(event) => buildClock(event)}>
            <div className='custom-title'>Custom Analog Clock </div>
            <div className='all-hand-color-container'>
                <div className='input-label-container'>
                    <input className='color-input' placeholder='Second-color' label='Second Hand Color' name='second' type='text' onChange={setClockColor} />
                </div>
                <div className='input-label-container'>
                    <input className='color-input' placeholder='Minute-color' label='Minute Hand Color' name='minute' type='text' onChange={setClockColor} />
                </div>
                <div className='input-label-container'>
                    <input className='color-input' placeholder='Hour-color' label='Hour Hand Color' name='hour' type='text' onChange={setClockColor} />
                </div>
                <div className='input-label-container'>
                    <input className='color-input' placeholder='Border-color' label='Border Color' name='border' type='text' onChange={setClockColor} />
                </div>
                <div className='input-label-container'>
                    <input className='color-input' placeholder='Base-color' label='Base Color' name='base' type='text' onChange={setClockColor} />
                </div>
            </div>
            <div className='custom-submit-button-container'>
                <button  className='custom-submit-button' type='submit'>Submit</button>
            </div>
        </form>
        

    )
}

export default CustomForm;

import React, { useState } from 'react';
import { useInterval } from './Hook';
import { ClockBase, Center, SecondHand, MinuteHand, HourHand } from './Components';
import CustomForm from './CustomForm';
import './App.css'


const App = () => {
    const date = new Date();
    const [seconds, setSeconds] = useState(0)
    const [minutes, setMinutes] = useState(0)
    const [hours, setHours] = useState(0)

    const [options, setOptions] = useState({
        clockColors: {
            second: 'green',
            minute: 'blue',
            hour: 'red',
            border: 'gray',
            base: 'black'
        }
    })

    const updateClock = (new_options) => {
        setOptions({ ...new_options });
    }


    useInterval(() => {
        setSeconds(date.getSeconds())
        setMinutes(date.getMinutes())
        setHours(date.getHours() % 12 || 12)
    }, 1000 )
    
    return(
        
        <div className='main-container'>
            <h1 className='form-container'>
                <CustomForm defaultOptions={options} updateClock={updateClock} />
            </h1> 
            <div className='clock-container'>
                <ClockBase color={options}>
                    <Center />
                    <SecondHand fraction={seconds} color={options}/>
                    <MinuteHand fraction={minutes} color={options}/>
                    <HourHand fraction={hours} color={options}/>
                </ClockBase>
            </div>
        </div>

        
    )
}



export default App;