使用 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)));
  };
};

和一个Container.js，useEffect如下：

  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，然后获取库存，否则什么都不做"。 =16=]

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

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

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

Proper understanding of dependency array in useEffect when working with Redux Thunk

reactjs

redux

redux-thunk

react-hooks

use-effect