反应挂钩无法使用动态命名正确更新状态

debugcn 发表于 Dev

拜利哈德温

我有一个react组件，用于向我的服务器发出登录请求。

它在模态中，我在其中使用Material UI

 <TextField
            onChange={handleChange}
            autoFocus
            name="email"
            margin="dense"
            id="email"
            label="Email Address"
            type="email"
            fullWidth
          />
           <TextField
           onChange={handleChange}
            autoFocus
            name="password"
            margin="dense"
            id="password"
            label="Password"
            type="password"
            fullWidth
          />

然后，我将具有处理程序状态以正确设置状态。

    const [state, setState] = React.useState({
        email: '',
        password: '',
        valid: false
    })

    const handleChange = (event) =>{
        event.preventDefault()
        console
        setState((state) => ({[event.target.name]: event.target.value, ...state}))
        if(state.email.length !== 0 && state.password.length !== 0){
            setState((state) => ({valid: true, ...state}))
        }
    }

但是，无论何时调用该函数，我都会注销syntheticEvent并获取正确的值，但是当我随后注销状态时，则未设置任何内容。我在使用带有钩子的完整状态对象方面经验不足，因此我无法真正解决问题。

该函数被调用三次后，name属性为null，并且出现此警告

This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property `target` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist().

丹尼斯瓦什

如警告所示，请尝试一次更新状态：

const handleChange = event => {
  event.preventDefault();
  const { name, value } = event.target;
  setState(state => {
    const { email, password } = state;
    const valid = email.length !== 0 && password.length !== 0;
    return { [name]: value, valid, ...state };
  });
};

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。