UseEffectフックが状態を更新しない

Question

私はこの例に従いますが、機能コンポーネントを使用しています。私のフィールドは状態全体で制御されており、問題なく動作します。ただし、状態を更新する関数はどれも機能していません。

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;

状態を設定していないことを除いて、validateFormとvalidateUsernameの両方が機能しています。どうして？

Answer 1

重要：useEffect内でsetStateを使用すると、無限ループが発生する可能性があります。その内部の状態を更新して実行を再レンダリングし、useEffectが同じ状態を再度変更して、再度ループする場合。

setStateを次の変更に置き換えます。

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

Answer 2

まず第一に、あなたが呼び出されるメソッドを追加する必要がありuseEffect、それにはdependencies

関数をuseCallback使用するときにフックを使用して関数を記述します。レンダリングのたびに新しい関数を作成することはありませんでした。

そして、変更後に新しい値を持つために、時間中に変更できる依存関係にすべてを配置する必要があります。つまり、それらはメモ化されます。

コードを更新してここに配置しました。必要なものかどうかを確認してください。

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