useState状态更新异常求助：调用settotCons后totCons仍为null

问题原因 #

React中useState的更新操作是异步批量执行的，当你调用settotCons(json)后，组件并不会立刻重新渲染，当前函数作用域内的totCons还是初始的null值，所以紧接着的console.log(totCons)打印的是旧值。

解决方法 #

如果你需要在totCons更新后查看它的最新值，可以通过以下两种方式：

1. 使用useEffect监听totCons的变化
   在组件中添加一个依赖totCons的useEffect，当totCons更新时，这个钩子会触发，此时就能拿到最新值：

   const [totCons, settotCons] = useState(null)
   useEffect(() => {
     const fetchData = async () => {
       const data = await fetch('https://piscons2.vercel.app/ConsPiscTotCons');
       const json = await data.json();       
       settotCons(json);
       console.log(json) // 这里能拿到接口返回的最新数据
     }  
     fetchData().catch(console.error);
   }, [])
   
   // 监听totCons变化，打印最新值
   useEffect(() => {
     console.log('更新后的totCons:', totCons)
   }, [totCons])
   

2. 通过渲染区域直接查看
   组件重新渲染后会使用更新后的状态值，你可以在渲染代码中直接输出totCons来确认：

   return (
     <div>
       {JSON.stringify(totCons)}
     </div>
   )
   

内容的提问来源于stack exchange，提问作者user609511