react hooks useState为什么在select onchange回调改变了状态却没有实时生效呢

最近学习react的hooks遇到个这个问题我看了文档和百度还是没搞懂

import React,{useState} from "react";
export default function Demo() {
  const [tempValue, setTempValue] = useState(0)
  return (
    <div>
      <select style={{width:"100px"}} onChange={e=>{
       // e.target.value值获取正确
       console.log('tempValue',e.target.value,tempValue);
       setTempValue(e.target.value)
       // e.target.value值获取正确 tempValue 延迟一步
       console.log('tempValue',e.target.value,tempValue);
      }}>
        {
          [1,2,3].map(item=>{
            return <option value={item} key={item}>{item}</option>
          })
        }
      </select>
        value:{tempValue}
    </div>
  );
}

修改state值的过程是异步的，所以你打印看不到最新值

slect有一个默认值属性
你需要将这个默认属性绑定上你的value值
就可以实现数据的双向绑定了

select需要绑定一个value。