使用 Redux Thunk 时正确理解 useEffect 中的依赖数组

Question

我开始学习 Redux 和 thunk 库。

我有一个包含函数的 Actions.js：

export const fetchInventory = (user_id) => {
return (dispatch) => {
    dispatch(fetchInventoryData());
    fetch("url", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },

      //make sure to serialize your JSON body
      body: JSON.stringify({ user_id }),
    })
      .then((res) => res.json())
      .then((res) => {
        saveInventory(res);
        dispatch(fetchInventorySuccess(res));
      })
      .catch((err) => dispatch(fetchInventoryFailure(err)));
  };
};

和一个带有useEffect的Container.js如下：

  useEffect(() => {
    if (inventory.inventoryData.length > 0) return;
    else if (user_id) fetchInventory(user_id);
    else return [];
  }, [user_id]);

EsLint 警告我在依赖数组中缺少 fetchInventory 和 inventory。但是，由于库存是此获取将更新的状态，包括它会使我们陷入无限获取。此外，这里需要的 user_id 是来自之前的获取请求的东西。在这种情况下，什么会进入依赖数组，为什么？

Answer 1

inventory 当然应该包含在依赖数组中，因为它在钩子回调中引用（也可能是 fetchInventory 动作创建者，出于同样的原因）。

我认为这里的问题是不正确的保护子句（即条件），您正在调用更新状态（和依赖项）的回调。

if-else-if-else 是问题所在。当第一个条件失败时，因为inventory.inventoryData.length不为零，检查第二个条件，果然有一个定义的user_id值并调用回调。

据我所知，您想要的条件是“如果有没有库存数据AND 是一个用户ID，然后获取库存，否则什么都不做”。

尝试简化您的条件和分支因子。

useEffect(() => {
  if (!inventory.inventoryData.length && user_id) {
    fetchInventory(user_id)
  }
}, [fetchInventory, inventory.inventoryData, user_id]);