Реагировать useEffect - только при монтировании

Question

Недавно я обновил корзину покупок Appt для CRA 3, которая включает в себя функцию eslint-plugin-Reaction-hooks useEffect.Соответственно, он вызывает зависимости для второго массива параметров в useEffect.

Я намеревался запускаться только при монтировании, поэтому я использовал [] ранее, и он работал как положено, но теперь он добавляет, добавляет эти зависимости и делаетне работает под нагрузкой.Я понимаю, что могу отключить это правило eslint на глобальном или индивидуальном уровне, но я бы предпочел знать, как это сделать в реакции.

const CartItem = ({ inventoryItems, dispatch, item }) => {
  const invItem = inventoryItems.find(invItem => invItem.id === item.id);

  useEffect(() => {
  const setWarnings = (item) => {
    let warnings = [];
    if (item.quantity > invItem.quantity) {
      warnings.push(`Note quantity of requested ${
        item.name
      }s was reduced by ${item.quantity -
        invItem.quantity} due to sold inventory since it was placed in cart.`);
      item.quantity = invItem.quantity;
    }
    if (item.price !== invItem.price) {
      warnings.push(`Note price for ${
        item.name
      } has changed since it was placed in cart (${
        invItem.price > item.price ? "+ " : ""
      } ${formatPrice(invItem.price - item.price)}).`);
      item.price = invItem.price;
    }
  }
  setWarnings(item)
},[invItem.price, invItem.quantity, item])

  return (/* here I will display my item and below it map warnings array */)
}

Answer 1

Думая об этом больше, я думаю, что он, вероятно, рендерится с предупреждениями при монтировании, но затем я сбрасываю количество и / или цену товара на основе изменений, связанных с запасами, при создании предупреждений. Это имеет логический смысл (продавать по текущей цене invItem и не продавать больше, чем в инвентаре), но также запускает соответствующее повторное отображение при изменении зависимости элемента и быстро удаляет напоминания. Я буду работать над этим и отправлю обратно.

Answer 2

попробуйте использовать setState для invItem (inventoryItem).

Установить состояние в функциональном компоненте. Затем вы сможете удалить свои зависимости.

const [inventoryItem, setInventoryItem] = useState(inventoryItems.find(invItem => invItem.id === item.id))

const setWarnings = (item) => { 
    // .... logic
}

useEffect(() => {
    // ...logic ( or remove it to a higher scope )
    setInventoryItem( item => {
        setWarnings(item)
        // item will = whatever the current value is and you can do your logic
   })
}, []) // I would try and override that rule regardless.

Кроме того, что вы делаете с setWarnings? это доступно только внутри useEffect. удалите объявление функции и просто вызовите его, как вы.

Помогло ли это, и я что-то упустил?

оформить заказ useReducer, может быть полезно: https://testdriven.io/blog/react-hooks-advanced/