Javascript 为什么我的状态没有立即反映在反应中？

我知道我错过了一些东西，只是不知道是什么。 我有以下组成部分：

const SearchComponent = (props) => {
  const [searchValue, setSearchValue] = useState('');

  const searchInputHandler = e => {
    const inputValue = e.target.value;
    setSearchValue(inputValue);
    console.log(searchValue);
    // filterData(searchValue, props)
  }

  return (
    <>
    <Col className="col-sm-6" style={styles.flex}>
      <InputGroup>
        <Input
          placeholder="Search"
          onChange={e => searchInputHandler(e)}
          value={searchValue}
          />
        <InputGroupAddon addonType="append">
          <Button style={styles.inputButton} color="info">Clear</Button>
        </InputGroupAddon>
      </InputGroup>
    </Col>
    </>
  )
};

const SearchComponent=（道具）=>{
常量[searchValue，setSearchValue]=useState（“”）；
const searchInputHandler=e=>{
常量输入值=e.target.value；
设置搜索值（输入值）；
console.log（searchValue）；
//filterData（搜索值、道具）
}
返回(
搜索权限管理器（e）}
value={searchValue}
/>
清楚的
)
};

在上面的组件中，我的输入的初始值是“”。当我打任何字母的时候，让我们说一个“t”

---

我希望searchValue会=“t”，因为我在方法中运行setSearchValue（inputValue）。但是，当我输入“t”时，状态保持不变。只有在我第二次输入它之后，它才会显示“t”。我在这里遗漏了什么？

setState

是异步的

看

目前，setState在事件处理程序中是异步的

在开始重新渲染之前，故意“等待”直到所有组件在其事件处理程序中调用setState（）。这样可以避免不必要的重新渲染，从而提高性能

因此，记录

console.log（searchValue）紧跟在
设置搜索值（inputValue）之后
将在当前渲染（或“在当前范围内”）中记录
搜索值
的值