相信大家在使用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])

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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐