如何在反应应用程序中保留数据以最小化服务器调用

Question

在我的 ReactJS 页面之一中，有两个下拉菜单，在选择一个或另一个的值时，它会调用服务器 API 来获取数据。 为了获取数据，我正在使用useEffect钩子，如下所示

export const useFetch = () => {
const [state, setState] = useState({ data: null, loading: true });

useEffect(() => {
setState(state => ({ data: state.data, loading: true }));
fetch(url)
  .then(x => x.text())
  .then(y => {
    setState({ data: y, loading: false });
  });
}, []);

return state;
};

现在，从下拉菜单中，可以进行一定数量的组合来获取 API 数据，因为选项和任何组合都不会太大，API 的值将保持不变，所以我需要为防止 API 调用，如果之前已获取相同的组合数据并仅利用以前的组合数据并最小化我的组件重新渲染（如果路由更改并返回，这也是一种情况）。

请建议在这种情况下如何处理。 我研究了浏览器的localstorage但如果浏览器/选项卡关闭等，清理localstorage值会有点问题

Answer 1

• 如果您希望在应用程序启动时保留数据，请使用 Redux
• 如果您希望为整个会话保留数据，请使用 sessionStorage（浏览器窗口关闭后将被删除）
• 如果您希望数据在有效时保留，请使用 localStorage，如果需要，您可以在beforeUnload 事件上清除存储

例子：

  componentDidMount() {
    window.addEventListener('beforeunload', this.handleBeforeunload)
  }

  componentWillUnmount() {
    window.removeEventListener('beforeunload', this.handleBeforeunload)
  }

  handleBeforeunload() {
      localStorage.removeItem('myItem')
  }