Question

我有一个使用classBased react的组件，并且工作正常，我决定切换到usestate，并且stopepd正常工作。现在handlechange以随机方式记录状态，但无法正常工作

我的handlechange和useState

  const [state, setState] = useState({
    email: "",
    password: "",
    wrongCombo: false,
    serverError: false
})

const handleChange = (evt) => {
    const target = evt.target;
    const value = target.value;
    const name = target.name;
    console.log(name)
    console.log(value)
    setState({
        [name]: value
    });
}

我的handlesubmit（它在console.log中检测到随机值，icant找到逻辑，但是日志不会按照handlechange中的输入获得两个值）

const handleSubmit = (event) => {
        event.preventDefault();

        const { email, password } = state;
        console.log(state)
        props.login(email, password, "login").
            then(data => {
            }).catch((err) => {
                if (err == "Error: Request failed with status code 403") {
                    setState({
                        wrongCombo: true
                    }, () => {

                    })
                } else if (err == "Network error") {
                    setState({
                        serverError: true
                    })
                }
            })
    }

这是我的渲染

<div>
            <form>
                {state.wrongCombo ? <Alert variant="danger" dismissible onClose={handleDismiss}> Wrong email and password combination </Alert> : null}
                {state.serverError ? <Alert variant="danger" dismissible onClose={handleDismiss}> Server Error </Alert> : null}
                <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" onChange={handleChange} />
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password" onChange={handleChange} />
                </div>
                <div className="text-center buttonContainer">
                    <button type="submit" class="btn btn-primary buttonLogin" onClick={handleSubmit}>Submit</button>
                </div>
            </form>
        </div>

Answer 1

从docs on useState:

与类中的this.setState不同，更新状态变量总是替换它而不是合并它。

更新它们时，必须替换useState对象中的所有值。您仅使用一个键向更新程序提供对象，因此仅保留该键。

执行此操作的简单模式是在通过更新之前散布先前的状态：

setState(prev => ({...prev, [newKey]: newVal }));

HandleChange / setState在迁移以响应useState挂钩后停止工作

1 个答案: