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

在我的一个ReactJS页面中，有两个下拉菜单，在选择其中一个的值时，它会调用服务器API来获取数据。为了获取数据，我使用

useffect

hook，如下所示

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

值会有点问题，等等

如果希望在应用程序启动时保留数据，请使用Redux

如果希望为整个会话保留数据，请使用会话存储（浏览器窗口关闭后将被删除）

如果希望保留有效的数据，请使用localStorage，如果需要，可以在beforeUnload事件上清除存储

例如：

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

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

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

---

如果您的URL包含用于获取组合的特定查询，您可以为端点添加缓存。@muratesin

URL”是相同的，只有

POST`body会更改。在这种情况下如何检查？如果可能的话，将端点方法更改为GET，并将参数设置为查询字符串。在此更改之后，我建议您使用axios缓存适配器进行缓存：。请您详细说明一下“localStorage，只要它有效”。如何解决这个问题，验证和无效（获取新的和更新的本地存储）？必须读为“本地存储，只要你认为它是有效的”。我不知道什么样的数据触发器会使您的数据无效，取决于您beforeUnload必须在窗口上触发“beforeUnload必须在窗口上触发”，我应该在根组件

App.js

（默认名称）中执行它吗，其中

const rootElement=document.getElementById（“根”）被调用了吗？它会清除所有的
localStorage
值吗？关于关闭选项卡/浏览器？我添加了一个示例