在另一个 useState 中设置 useState

Question

我试图通过使用useState 分别输入分钟和秒来设置时间（mm:ss），并将它们与另一个结合以跟踪整体表单数据，但是我似乎无法得到要推送到表单数据中的组合字符串...

我想我可能以某种方式错误地设置了数据...

const Modal = ({show, handleClose, handleAdd, children}) => {
    const today = new Date().toISOString().substr(0, 10);
    let initialFormState = {
        date: today,
        distance: '5.23',
        time: ''
    };
    let initialTimeState = {
        mins: 0,
        secs: 0
    };

    const [formData, setFormData] = useState(initialFormState);
    const [timeData, setTimeData] = useState(initialTimeState);

    const submitData = event => {
        event.preventDefault();
        console.log({timeData});

        // Add correctly formatted time to main formData
        const {mins, secs} = timeData;
        const time = `${mins}:${secs}`;
        setFormData({...formData, 'time': time});

        console.log(formData); // Here I can see that the 'time' field is empty...

    }

    return (
       ...
    );
};

export default Modal;

Answer 1

setFormData 更改是异步发生的，遗憾的是您不会立即看到修改。相反，您可以使用 useEffect 钩子来捕捉您的状态变化。

请尝试以下方法：

useEffect(() => {
   console.log(formData);
}, [formData]);

在Using the Effect Hook 链接上进一步了解useEffect 挂钩。