useEffect里面setState获取不到异步的数据

Question

console.log(res) 在控制台里可以正常看到数据。
显示出的结果[{"name":"电抗器","spec":"辅导","unit":"地方","unitprice":12,"price":120,"proID":500001,"number":10,"key":1}]。
但是tableData里面仍然是空数组没有更新数据是为什么？

const [tableData, setTableData] = useState<[]>([]);
 useEffect(() => {
    getproducts(location.query.orderID).then(res=> {    
      setTableData(res)  
      console.log(res)  
      console.log(tableData) // 这里获取不到数据 
    })
  }, []); 
console.log(tableData) // 这里可以获取到数据
return (
   console.log(tableData)
  //这里也获取不到tableData 的数据 这里控制台显示的是空数组
)

Answer 1

因为这是个异步操作你立即去console.log还没完成set的动作
你用useEffect去监听tableData做些什么事情就可以了

Answer 2

你使用了 useEffect(fn,[]) 只会在初次挂载完成后执行一次，里面state 永远是初始值[] 你可以理解为 componentDidMount()
如果你想每次更新state（你这里是 tableData）都能在 useEffect 中读取到，那么请使用useEffect(fn) 或者 useEffect(fn,[tableData])

推荐你系统学习下官方文档关于Hooks的介绍 =》Hooks官方文档

Answer 3

useEffect(fn, [])这相当于组件挂载钩子函数，在组件渲染到页面的时候立即调用，且这个fn是个回调函数，一般回调函数会在某个特定时间才会触发，可以理解为是一个异步任务，所以就会有如下执行顺序， 先是外面的console.log(tableData) 打印出空数组，然后在执行 return 语句（return里面你这样写不会报错吗？） ，然后执行 useEffect的fn，通过setTableData(res)修改了tableData数据（修改数据是异步任务），数据一旦更改，函数组件又会执行，此时外面的console.log(tableData) 打印出有数据的数组，然后在执行return，最后才是执行fn里面的console.log(tableData)，由于修改数据是异步任务，所以输出 []。有错误的地方请指出