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

发布于 2022-09-12 03:00:52 字数 711 浏览 28 评论 0

比如说,购物车计算总价(总价 = 购物车商品总价 - 优惠券满减),优惠券是根据购物车内商品数量或者选中的商品类型决定的。。。这样的话给总价使用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])

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文