首先

由于筆者平常主要開發BE，對於React的狀態(state)規範不熟悉，因此浪費了兩天的時間。

我将发布这篇文章。

总结一下

即使调用了使用useState定义的set函数，状态也不会立即反映到state上。

更新的时机在重新渲染后得到反映。

如果在调用set函数之后立即使用state，可以使用useEffect来获取值。

我想做的事情

当标题所示，在状态更新时，我希望能够使用新的状态在另一个函数中进行处理。

我打算写一个程序，这个程序会在输入时将输入内容输出到控制台。

NG模式

在调用set函数后直接引用state的模式。

import React, { useState } from 'react'

const Sample: React.FC = () => {
  const [searchText, setSearchText] = useState<string>('')

  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchText(e.target.value)
    console.log(searchText)
  }

  return (
    <div>
      <input
        type="text"
        value={searchText}
        onChange={handleOnChange}
      />
    </div>
  )
}

以这种方式写入时，存在一个问题，即“在输入的瞬间无法输出最后输入的字符”。

这个原因是因为在React中使用useState定义的状态是在渲染之后才更新值的规定。

要查看反映出来的状态，我们应该怎么做呢？

好模式

import React, { useEffect, useState } from 'react'

const Sample: React.FC = () => {
  const [searchText, setSearchText] = useState<string>('')

  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchText(e.target.value)
  }

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

  return (
    <div>
      <input
        type="text"
        value={searchText}
        onChange={handleOnChange}
      />
    </div>
  )
}

通过在useEffect的依赖数组中指定state，然后在渲染后引用state，即可获得更新后的值。