重置useState的初始状态

Question

为了提高我的React技能，我一直在尝试构建可重用的表单状态挂钩和表单验证器。我的自定义钩子FormState用空字符串初始化一个对象，该对象的值将用作我的钩子的初始状态。我编写了一个函数clearInputs，我希望将输入重置为初始状态，但无法更新。

我一直在四处寻找答案，甚至参考此Stack Overflow帖子：使用React Hooks重置为初始状态。仍然没有骰子。

// MY FORMSTATE HOOK

import { useState } from 'react';

const FormState = props => {

    let initialState = { ...props };

    const [ inputs, setInputs ] = useState(initialState);

    const [ errors, setErrors ] = useState(initialState);

    const handleInput = e =>

        setInputs({

            ...inputs,

            [e.target.name]: e.target.value

        });

    const handleError = errs => setErrors({ ...errors, ...errs });

    const resetForm = () => {

        setInputs({ ...initialState });

        setErrors({ ...initialState });

    };

    const clearInputs = () => {

        console.log('SUPPOSED TO CLEAR', initialState)

        console.log('MY INPUTS', inputs)

        setInputs({ ...initialState });

        console.log('AFTER THE SETTING', inputs)

    };

    return [ inputs, handleInput, errors, handleError, resetForm, clearInputs ];

};

export default FormState;

触发clearInputs时，应将输入重置为初始状态。相反，什么也没有发生。任何帮助都非常感谢。

编辑：让我进一步澄清。我表单中的每个字段都从输入（用户名，密码1等）传递一个值。调用clearInputs时，它会清除钩子中的输入，但不会清除Field中的值。

Answer 1

关于为什么登录不正确，必须理解这一点：每次调用钩子时（基本上在每个表单渲染器上），都会创建一个新的clearInputs函数，该函数具有其自己的版本inputs。因此，在clearInputs函数本身inputs内部无法更改，因为它们来自作用域中较高的位置，即useState。如果您想注意到钩子的两次调用之间的变化，则可以inputs在返回[inputs，...]之前记录日志。同样，在您的钩子中，您没有在调用setInputs，而是定义了一个clearInputs函数，该函数将触发状态更改，该函数将重新呈现您的组件，该函数将再次使用您的钩子，您的钩子将读取的新值inputs并创建一个新clearInputs功能。