在UseEffect中更新布尔状态

时间:2020-01-08 02:08:23

标签: reactjs react-hooks

现在使用钩子已有几周了,有点想知道为什么我以前的代码不能像现在的当前代码那样工作。

我想在每次触发更新布尔值时更新我的​​提取调用,但是当我尝试使用函数中的useEffect相同的逻辑时,它无法正常工作。在大约两个渲染中,它会陷入真实状态,这在调用API时会抵消我的偏移量,但是现在它可以按预期工作,但是我仍然很好奇我为避免将来出现这种情况而缺少的东西。

我还尝试在函数上使用useCallback,因为我一直跟踪到setUpdate直到一些渲染后才被设置为false。

谢谢您的见解

  // Works as intended
  useEffect(() => {
    console.log('update:', update)
    if (update) {
      if (offset && total && offset < total) {
        const {
          latitude,
          longitude,
          term,
          limit,
          price,
          radius,
          rating,
        } = processData()
        fetch(//fetchparams)
          .then(res => res.json())
          .then(data => {
            let businesses = filterData(data.businesses, unwanted, rating)
            setOffset(prevOffset => prevOffset + data.businesses.length)
            setData(shuffle(businesses))
            setUpdate(false) // This would render twice messing up UI to last few restaurants objects
          })
          .catch(e => {
            console.log('error', e)
          })
      }
    }
   //Previously
 const updateYelpData = () => {
    if (offset && total && offset < total) {
      const {
        latitude,
        longitude,
        term,
        limit,
        price,
        radius,
        rating,
      } = processData()
      fetch()
        .then(res => res.json())
        .then(data => {
          let businesses = filterData(data.businesses, unwanted, rating)
          setOffset(prevOffset => prevOffset + data.businesses.length)
          setData(shuffle(businesses))
          setUpdate(false)
        })
        .catch(e => {
          console.log('error', e)
        })
    }
  }

  useEffect(()=>{
   if(update){
updateYelpData()
}
},[update])

0 个答案:

没有答案