重置useState的初始状态

Question

为了提高我的React技能，我一直在尝试构建可重用的表单状态挂钩和表单验证器。我的自定义钩子FormState用空字符串初始化一个对象，该对象的值将用作我的钩子的初始状态。我编写了一个函数clearInputs，我希望将输入重置为初始状态，但无法更新。我一直在四处寻找答案，甚至参考此Stack Overflow帖子：使用React Hooks重置为初始状态。仍然没有骰子。// MY FORMSTATE HOOKimport { 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功能。