useState反应挂钩始终返回初始状态的原因是什么？

问题描述

我正在制作一份与验证相关的表格。验证后，我必须显示错误。因此，我使用了useState()钩子，如下所示。但是似乎我无法更新新状态，因为它总是返回初始值。我哪里出错了？

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;

我尝试console.log(error)，但它总是返回initial state hi。

解决方法

这是因为状态更新是异步的。 您需要console.log(error)之前return才能在每个渲染器上看到它。

,

在输入中，您应该使用defaultValue而不是value

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

如果将日志移动到if语句中，那也更好

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

,

setState是异步的，如果您需要捕获新值，则可以使用useEffect。