代码之家 › 专栏 › 技术社区 › Abidh

使用JS对象作为API的缓存

reactjs javascript

Abidh · 技术社区 · 5 年前

const ParentComponent = () => {
   const [cache,setCache] = useState({});
   const data = [{url:"http://.."} , {url:"http://.."} , {url:"http://.."}];
   return (
     data.map( item,ind  => (<ChildComponent item={item} setCache={setCache} cache={cache} /> ) )
          )
}

const ChildComponent = ({item,setCache,cache}) => {

const [img,setImg] = useState(null);

useEffect(() => {
    const setVal = async () => {
      const val = await getProfilePic(item.url); //api
      setCache({...cache ,[item.url]:val})
      setImg(val);
    };
    if(cache[item.url]) 
    { return setImg(cache[item.url]) }
    else { setVal(); }

} ,[])

  return (
    <div> <img src={img} /> </div>
   )
}

这里是数组变量中的url 数据可以是相同的。在这种情况下,它不应该再次调用API,而应该从变量缓存中获取。在上述情况下的问题是,当数组中的第二个项用于渲染子组件时,它没有得到我们在第一次渲染中使用设置的值(使用数组中的第一个项)。我怎样才能做到这一点?