React useState не сохраняет изменения - PullRequest
Новая
       16

React useState не сохраняет изменения

0 голосов
/ 28 мая 2020

Текущая ситуация

Я улучшаю производительность компонента с именем 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, я обновляю visibleProducts с помощью функции установки.

Проблема:

В методе areEqual я сравниваю предыдущие реквизит со следующим реквизитом. Если они идентичны, функция, возвращающая истину, и 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}

Это вызывает повторный рендеринг в дочернем компоненте без сохранения предыдущих изменений.

Надеюсь, вы хорошо понимаете. Попробовал объяснить поподробнее. Извините за мой язык.

...