使用useState因异步导致数据不能及时更新的问题

相信大家在使用hooks的时候都踩过这样的坑，useState因异步导致数据不能及时更新。

const [kwd, setkwd] = useState("")

const changekwd = (res) => {
    setkwd(res.kwd)
    getNew()        //渲染数据方法
  }

如上例，当使用setkwd对kwd进行修改，并重新渲染数据时，发现不能够立即获取到更新后的数据，出现的效果就是：触发两次该方法才成功渲染页面数据。

这很明显是useState的异步所导致的。

解决方案：

使用useEffect对useState的数据进行监听，监听到变化（数据变新）后再使用与渲染该数据。

  const [kwd, setkwd] = useState("")

  const changekwd = (res) => {
    setkwd(res.kwd)
  }

  useEffect(()=>{
    getNew()        //这里会获取到变化后的数据
  },[kwd])

希望本文会对你有所帮助^_^