主页 / 问题 / 1218956
Accepted
Dan
Asked:2021-12-15 15:48:10 +0000 UTC2021-12-15 15:48:10 +0000 UTC

在 Redux 上实现这样的逻辑是否正确，或者有什么更好的建议？

  • 772

有一个购物车，通过 Redux 进行添加和存储。有不同的action.types，添加到购物车，从购物车中删除，添加单元，删除单元等。在更新期间还需要计算最终价格。我想为每个 action.type 添加一个地图循环并浏览所有价格，但这会延迟 1 次点击，状态会更新。我做了以下，但在我看来不太正确，虽然它工作正常

我注意到状态的任何变化都会为我们触发 componentDidUpdate 以及我添加此代码的原因

componentDidUpdate(prevProps, prevState, snapshot) {
    const products = this.props.cart
    let totalPrice = 0
    products.map(item =>{
      totalPrice += item.priceGroup
    })
    this.props.updatePrice(totalPrice)
  }


export function updatePrice(totalPrice){
  return{
    type: UPDATE_PRICE,
    totalPrice
  }
}

case UPDATE_PRICE:
      return {
        ...state,
        totalPrice: action.totalPrice
      }

正如我所说，一切正常）但是使用 Update_PRICE，componentDidUpdate 再次触发，即每次迭代它工作 2 次（首先是数量变化，然后再次是价格已更新且状态已更新）是更正确的解决方案结构这样

在此处输入图像描述

reactjs

1 个回答

  1. Best Answer

    看 - 你有一个计算字段（来自 redux 存储的纯函数）并且你在 componentDidUpdate 中计算它 - 这只是麻烦的一半:)

    如果总价格需要写在几个地方？- 每次计算每个组件？

    第二个麻烦是，当你计算它时，你调用了 dispatch action，这自然会导致重新渲染——在某些情况下会导致无限循环:)

    如何做得更好？在减速机中，当更改商品的价格/数量时，我会自动更改总金额

    选项2（更糟）记住组件中的计算，当然不要在计算字段上调用调度 https://medium.com/@mohsentaleb/how-to-effectively-memoize-methods-in-react-class-带有lodash的组件-a6df0569dd5a

    • 1

相关问题