【react-hooks】当useMemo的依赖数组之间互相存在依赖关系的时候,会有重复执行?

比如说,购物车计算总价(总价 = 购物车商品总价 - 优惠券满减),优惠券是根据购物车内商品数量或者选中的商品类型决定的。。。这样的话给总价使用useMemo的时候,依赖的数组就是[选中商品总价,优惠券],我使用useEffect监听选中商品变化,在useEffect里更改优惠券,这样的话优惠券改变和选中商品改变会让总价useMemo执行多次???如何避免重复执行两次呢?


  const [ x, setX ] = useState(true) // 假设这是选中商品
  const [ y, setY ] = useState(false) // 假设这是优惠券
  useEffect(() => { // 渲染后执行
    if (x) { // 选中商品后更改优惠券
      setY(false)
    } else {
      setY(true)
    }
  }, [x])

  const toggle = () => { // 更改选中商品
    setX(!x)
  }

  // 计算得到总价~~~~
  const xy = useMemo(() => { // 渲染中执行
    console.log('useMemo') // toggle执行,这里会执行两次console
    return x + '|' + y
  }, [x, y])
阅读 3k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题