为什么第一次调用函数时React返回空？[副本]

Question

当我在输入元素中输入第一个字符时，我得到“空字符串”。

function form(props) {
    // function getData(e){
    //     e.preventDefault()
    //     console.log(e.target[1].value)
    const [title, setTitle] = useState("")

    function getTitle(e){
        setTitle(e.target.value)
        console.log(title) //First time shows "empty string"
    }

    
    return (
        <form >
            <div>
                <label >Title</label>
                <input type="text"  name="title" onChange={getTitle} />
            </div>
    </form>)

在我看来，我在输入元素中输入一个字符，触发“onChange”事件，运行函数getTitle，设置“title”变量，该变量连接到useState钩子，然后控制结果。按照这个推理，我希望输入第一个字符。相反，我得到的是“空字符串”。从第二个字符开始，控制台打印字符。

对于“onInput”，函数也会发生同样的情况。

如何解决这个问题，为什么会发生？

Answer 1

setTitleasyncronous，必须检查useffect

useEffect(() => {
   console.log(title);
}, [title])

Answer 2

设置状态是异步的，因此您的console.log在设置状态之前运行。如果您使用use效应钩子来查看状态，您应该会看到值。挂接运行后渲染，因此您将看到当时更新的状态信息。

useEffect(() => {
   console.log(title);
}, [title]);