javascript - 如何停止在 React 中重新渲染时进行 api 调用？

Question

在我的主页上，我有这样的代码

{selectedTab===0 && <XList allItemList={some_list/>}
{selectedTab===1 && <YList allItemList={some_list2/>}

现在，在 XList 中，我有这样的东西:

{props.allItemList.map(item => <XItem item={item}/>)}

现在，在 XItem 内部，我正在调用一个 api 来获取 XItem 的图像。
现在我的问题是当在主页时，我将选项卡从 0 切换到 1 或 1 到 0，它再次调用 XItem 中的所有 API。每当我切换标签时，它都会再次调用 api。我不想那样。我已经在 XItem 中使用了 useEffect，其中 [] 数组作为第二个参数。
我有我的后端代码，我在其中制作了一个 api 来获取 XItem 的图像。 API直接返回图像而不是url，所以我不能一次调用所有api。
我需要一些解决方案，以便我可以最小化 api 调用。
感谢帮助。

Answer 1

基本问题是您选择所选选项卡的方式是安装和卸载组件。重新安装组件必然会重新运行任何安装 useEffect发出网络请求并将任何结果存储在本地组件状态中的回调。卸载组件必然会处理组件状态。

{selectedTab === 0 && <XList allItemList={some_list} />}
{selectedTab === 1 && <YList allItemList={some_list2} />}

一种解决方案是通过 isActive支持两个 XList和 YList并根据 selectedTab 设置值值(value)。每个组件根据 isActive 有条件地呈现其内容。支柱。这个想法是保持组件安装，以便它们在最初安装时只获取一次数据。

<XList allItemList={some_list} isActive={selectedTab === 0} />
<YList allItemList={some_list2} isActive={selectedTab === 1} />

示例 XList

const XList = ({ allItemList, isActive }) => {
  useEffect(() => {
    // expensive network call
  }, []);

  return isActive 
    ? props.allItemList.map(item => <XItem item={item}/>)
    : null;
};

替代方法包括将 API 请求和状态提升到父组件并作为 props 向下传递。或者使用 React 上下文来做同样的事情并通过上下文提供状态。或者实现/添加到像 Redux/Thunks 这样的全局状态管理。