React useEffect - 仅在Mount上运行

Question

最近，我更新了购物车Appt到CRA 3，其中包括eslint-plugin-react-hooks useEffect。恰当地，它强制依赖于useEffect中的第二个参数数组。

我的意图是只在mount上运行，所以我之前使用过[]并且它按预期工作，但现在它添加了这些依赖项并且不会在加载时运行。我知道我可以全局或单独关闭这个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

尝试使用setState for 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。删除函数声明，然后像你一样调用它。

这有用吗，我错过了什么？

checkout useReducer，可能很有用：https://testdriven.io/blog/react-hooks-advanced/

Answer 2

考虑更多，我认为它可能会在挂载时发出警告，但我会根据与警告相关的更改来重置项目数量和/或价格。这具有逻辑意义（以当前的invItem价格出售，并且不会在库存中出售更多），而且还会在项目依赖性发生变化时触发适当的重新渲染，并快速清除提醒。我将继续努力并发回。