Javascript 当前状态下的设置状态与没有当前状态下的设置状态？

这是我的密码

    const [state, setState] = useState({
        email: '',
        password: '',
        last_name: '',
        first_name: ''
    });

    const emailChangeHandler = (e) => {
        setState(c => {
            return {
                ...c,
                email: e.target.value
            }
        })
    }

    return (
        <form>
            <input className="input" type="text" name="email" onChange={emailChangeHandler}/>
            <input className="input" type="text"/>
            <input className="input" type="text"/>
        </form>
    )

因此，我尝试在不使用当前状态的情况下更新状态，如下所示：

const emailChangeHandler = (e) => {
    setState({...state, email: e.target.value})
}

它的工作，但为什么？

---

设置状态带currentstate和不带currentstate之间有什么区别？

如果使用设置状态回调，则事件值将在它之前通过react清除。因此，您需要在使用之前存储这些值

   const email = e.target.value;
   setState(c => {
        return {
            ...c,
            email,
        }
    })

就回调和不回调的区别而言， 状态更新是批处理的，因此您可以使用函数setState，即带有回调的setState。即使在同一事件处理程序中进行了多个setState调用，也可以保证值将来自以前的更新

比如说

const emailChangeHandler = (e) => {
        setState({
                ...c,
                email: [...c.email,e.target.value]
            })
        setState({
                ...c,
                email: [...c.email, 'psw']
            })
    }

在上述情况下，如果c是{email:['xyz@g.com']，名称：'p'}，发布更新值将变为{email:['xyz@g.com“，'psw']，名称：'p'}而不是{电子邮件：['xyz@g.com，e.target.value，'psw']，名称：'p'}

所以这里我们尝试在闭包中使用e.target.value，闭包基本上会为后续的按键锁定事件对象

关于React事件： React事件是复制本机dom事件的特殊合成事件

---

React基本上会重新使用这些事件对象，在我们的例子中，它也会重新使用以前的事件对象，因此我们面临这个问题。

React会重新使用事件对象，因此在setState回调函数中调用它时，事件不再可用。您可以在之前将值放入变量中。const{value}=e.target；setStates=>{…s，email:value}；至于区别，已经有一个很好的问题：@emilebergron非常感谢你，它的工作。我想我现在就要读这件事了。

const emailChangeHandler = (e) => {
        setState({
                ...c,
                email: [...c.email,e.target.value]
            })
        setState({
                ...c,
                email: [...c.email, 'psw']
            })
    }

This will work:

const emailChangeHandler = (e) => {
    const value = event.target.value;
    setState(c => {
        return {
            ...c,
            email: value
        }
    })
}