在另一个 useState 中设置 useState

Question

我正在尝试设置时间 (mm:ss)，方法是通过 useState 的一次使用分别获取分钟和秒的输入，并将它们与另一个组合以跟踪整个表单数据，但是我似乎无法将组合字符串推送到表单数据中...

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

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]);

进一步了解 useEffect 挂钩 Using the Effect Hook link。

在另一个 useState 中设置 useState

Setting useState within another useState

javascript

reactjs

react-hooks

use-state