HandleChange/setState 在遷移以響應 useState 掛鈎后停止工作

Question

我有一個使用 classBased react 的組件，它工作正常，我決定切換到 usestate，它 stopepd 工作。 現在handlechange隨機記錄state，但是不能正常工作

我的 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中的隨機值，找不到邏輯，但日志不會根據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

來自useState 的文檔：

與 class 中的 this.setState 不同，更新 state 變量總是替換它而不是合並它。

更新時必須替換 useState object 中的所有值。 您僅使用其中一個密鑰向更新程序提供 object，因此只會保留該密鑰。

這樣做的一個簡單模式是在傳遞更新之前傳播以前的 state：

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