React 不会在本地存储中缓存 API 请求的结果

Question

我正在尝试在 react 中构建一个非常简单的 component，它从 API 请求图像，然后在应用程序中为任何其他请求存储/缓存它使用该组件。

目前，该组件始终呈现，因此 - 如果我在页面上多次使用该组件（即在前 10 个结果中），我会收到多个 API 调用，而我期待只得到 1 API 调用，结果返回并卡在 localstorage.

有人有什么想法吗？我应该使用 useMemo 还是其他？关于如何防止多次 API 调用的任何想法？

import React, {useState, useEffect} from 'react';
import UserService from '../../api/UserService';

const ProfileImage = () => {
   const userService  = new UserService();
   const [avatar, setAvatar] = useState();
   const cachedAvatar = localStorage.getItem('avatar');

   const mount = () => {
      console.log(cachedAvatar);

      if (cachedAvatar) {
         setAvatar(cachedAvatar);
       } else {
         userService.getUser().then((res)=>{
            setAvatar( res.avatarUrl );
            localStorage.setItem('avatar', res.avatarUrl);
         });
       }

   }

   /* unmount cleanup */
   useEffect(() => {
      mount();
   },[]);

   return (
      <img src={  avatar ? avatar : require('../../img/placeholder/avatar.png')}></img>
   );
};

export default ProfileImage;

Answer 1

您有多个 API 调用，因为只有在第一个调用结束后，头像才会在 localStorage 中完成。使用 localStorage 不是正确的解决方案。

您不必每次都调用getUser。例如：

const userService = new UserService();
let getUserCall;
// create a custom hook
const useAvatar = () => {
   const [avatar, setAvatar] = useState();
   useEffect(() => {
      if (!getUserCall) {
        getUserCall = userService.getUser();
      }
      getUserCall.then(res => setAvatar(res.setAvatar))
   },[]);
   return avatar;
}

然后在您的组件内部使用 useAvatar 挂钩。

const ProfileImage = () => {
    const avatar = useAvatar();
    return (
     <img src={  avatar ? avatar : defaultAvatar  }> 
     </img>
    );
}

React 不会在本地存储中缓存 API 请求的结果

React Wont Caching Results of API request in Local storage

web-component

reactjs