useState() 反应钩子总是返回初始 state 的原因是什么？

Question

I am making a form in react with validation. I have to show the error after validation. So I used useState() hook as follows. But it seems i can't update the new state as it always returns the initial value. Where did I go wrong?

import React, { useState } from 'react';
import './index.css';

const Firstname = ({ handleInputChange, firstName }) => {

    const [error, setError] = useState('hi');

    const handleBlur = (event) => {
        const { value } = event.target;
        validateFirstName(value);
    }

    const validateFirstName = (name) => {
        if (name.trim().length === 0) {
            setError('Enter first Name');
        }
        console.log(error);
    }

    return (

        <>
            <label>First Name</label>
            <input type='text'
                placeholder='Eddard'
                name='firstName'
                value={firstName}
                onChange={handleInputChange}
                onBlur={handleBlur} />


        </>

    )
}

export default Firstname;

I tried to console.log(error) but it always returns the initial state hi .

Answer 1

This is because state updates are asynchronous. You need to console.log(error) just before your return to see it at each render.

Answer 2

In the input, you should use defaultValue instead of value

<input type='text'
    placeholder='Eddard'
    name='firstName'
    defaultValue={firstName}
    onChange={handleInputChange}
    onBlur={handleBlur} />

It would also be better if you move the log inside the if-statement

const validateFirstName = (name) => {
    if (name.trim().length === 0) {
        setError('Enter first Name');
        console.log(error);
    }
}

Answer 3

setState is asynchronous, if you need to catch the new value you can use useEffect.