useState() 反应钩子总是返回初始状态的原因是什么？答案

【问题标题】：What is the reason for useState() react hooks always returns the initial state?useState() 反应钩子总是返回初始状态的原因是什么？
【发布时间】：2020-08-13 12:01:55
【问题描述】：

我正在制作一个表单来响应验证。我必须在验证后显示错误。所以我使用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。

【问题讨论】：

setError 是异步操作，因此 console.log 不会显示实际值。 BTW name.trim().length === 0 这意味着输入为空
想想控制流。如何在调用 setError 和 console.log 之间到达错误分配的行？
尝试添加类似<button onClick={()=>console.log(error)}>log error</button> 的内容，然后您可以单击它来查看状态，而无需复杂的 setState 异步

标签： reactjs react-hooks use-state

【解决方案1】：

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

【讨论】：

非常感谢。我一直在函数内部做console.log(error)，所以当时它没有渲染。我在函数外尝试并工作。谢谢。

【解决方案2】：

在输入中，您应该使用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);
    }
}

【讨论】：

【解决方案3】：

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

【讨论】：