Question

当前情况

我正在使用ProductMain来改善名为React.memo()的组件的性能。 ProductMain包含列表中的ProductComponent。而且我将每个产品信息（例如名称和数量）以及handleChangeQty方法作为ProductComponent传递给props。要单独渲染ProductComponent，我将React.memo与自定义比较器方法areEqual

一起使用

const areEqual = (prevProps, nextProps) => {
  const prevLocation = prevProps.product.locations
  const nextLocation = nextProps.product.locations
  let isEqual = true
  if(prevLocation.length !== nextLocation.length) return false 
  else
    for (let i = 0; i < nextLocation.length; i++) {
      if (nextLocation[i].adjustedQty !== prevLocation[i].adjustedQty)
        isEqual = false
    }
  return isEqual
}

const ProductComponent: React.FC<Props> = ({ product, productIndex, onQtyChange, onFocusChange }) => {   
   const handleQtyChange = newValue => {
      onQtyChange(locationIndex, location.onHandQty, newValue)
   }
   return(<React.Fragment>
   //some button that can change the qty 'onClick'={handleQtyChange}
    </React.Fragment>)
}

export default React.memo(ProductComponent, areEqual)

当我更改数量时，从ProductComponent开始，handleChangeQty函数将在ProductMain中起作用。 ProductMain有一个useState钩子visibleProduct。每次handleQtyChange方法有效时，我都会使用setter函数更新visibleProducts。

问题是

在areEqual方法中，我正在比较上一个道具和下一个道具。如果它们相同，则返回true和ProductComponent的函数将不会重新呈现。并且其工作正常，仅重新更改了组件。但是visibleProducts并没有始终保持更改。例如，在一开始

`visibleProduct = [{productId: 001, qty:0},{productId: 002, qty: 0}]`

handleQtyChange工作后，visibleProduct的状态更改为

`visibleProduct = [{productId: 001, qty:1},{productId: 002, qty: 0}]`

然后我再次更改了

`visibleProduct = [{productId: 002, qty: 1}]`

将先前的值设置回初始值，例如{productId: 001, qty:0},{productId: 002, qty: 1}

它导致子组件中的重新渲染，并且不保留以前的更改。

希望您理解得很好。我试图解释得更详细。抱歉，我的语言。

反应useState不保留更改

0 个答案: