UseEffect-Hook aktualisiert den Status nicht

Question

Ich folge diesem Beispiel, verwende aber eine Funktionskomponente. Mein Feld wird durch den Zustand kontrolliert und es funktioniert ohne Probleme. Keine meiner Funktionen, die den Status aktualisieren, funktioniert jedoch:

function FormFieldTest() {

    const [state, setState] = useState({
        username: '',
        usernameValid: false,
        formValid: false,
        errorMsg: {}
    });

    useEffect(()=> {
        validateUsername();
        validateForm();
    },[state.username]);

    const updateUsername = (username) => {
        setState({...state, username: username});
    }

    const validateUsername = () => {
        let username = state.username;
        let usernameValid = true;
        let errorMsg = {...state.errorMsg};

        if(username.length < 3) {
            usernameValid = false;
            errorMsg.username = "Must be at least 3 characters long."
        }
        setState({...state,
            usernameValid: usernameValid,
            errorMsg: errorMsg
        });
    }

    const validateForm = () => {
        const usernameValid = state.usernameValid;

        setState({
            ...state,
            formValid: usernameValid
        });
    }

    return (
        <div className="container">
            <form>
                <div className="form-group">
                    <label htmlFor="username">Username</label>
                    <ValidationMessage valid={state.usernameValid} message={state.errorMsg.username} />
                    <input type="text" id="username" name="username" className="form-field" value={state.username} onChange={(e)=>updateUsername(e.target.value)} />
                </div>
            </form>
        </div>
    )
}

export default FormFieldTest;

Sowohl validateForm als auch validateUsername funktionieren, außer dass sie den Status nicht festlegen. Woher?

Answer 1

Achtung: Wenn Sie setState in useEffect verwenden, wird möglicherweise eine Endlosschleife erstellt, wenn Sie den Status darin aktualisieren und den Lauf erneut rendern und useEffect denselben Status erneut ändert und erneut schleift.

Ersetzen Sie Ihren setState durch diese Änderung:

 setState(state => ({ ...state, username: username }));

Answer 2

Zunächst einmal müssen Sie Methoden gerufen hinzufügen , useEffectum esdependencies

Schreiben Sie Ihre Funktionen mit useCallbackHooks, während Sie sie verwenden, und erstellen Sie nicht nach jedem Rendern eine neue Funktion.

Und Sie müssen alles in Abhängigkeiten setzen, die während der Zeit geändert werden können, damit ihre neuen Werte nach der Änderung erhalten bleiben. Es werden sie gespeichert

Ich habe Ihren Code aktualisiert und hier abgelegt. Überprüfen Sie, ob er Ihren Wünschen entspricht.

https://codesandbox.io/s/zealous-grothendieck-y438z?file=/src/App.js