页面加载时axios闪烁获取的数据

Question

我正在为我在盖茨比的公司构建一个新的营销网站，利用axios从REST api中获取数据，以动态显示经销商列表，然后在整个网站上动态显示所选经销商的联系信息。这是通过设置cookie来完成的，cookie在API上携带经销商的ID，然后将根据cookie获取该经销商的信息。然而，我遇到了一个问题，我目前显示在标题中的经销商名称在每次加载页面时都会闪烁。它看起来很糟糕，所以我想知道是否有一种方法可以缓存数据，或者不强制它在每次加载页面时提取数据并消除闪烁。我还在开发中，所以我在Netlify上展示了它，你可以看看现场版本。

这是我的钩子。

使用fetch.ts

import { useEffect, useState } from 'react';
import axios from 'axios';
export const useFetch = (url: string) => {
const [status, setStatus] = useState('idle');
const [data, setData] = useState([]);
useEffect(() => {
if (!url) return;
const fetchData = async () => {
setStatus('fetching');
const result = await axios(url);
setData(result.data);
setStatus('fetched');
};
fetchData();
}, [url]);
return { status, data };
};

然后我可以在页面中消费这个，如下所示：

const [query] = useState('https://jsonplaceholder.typicode.com/users/1/');
const url = query && 'https://jsonplaceholder.typicode.com/users/${cookie}';
const { data } = useFetch(url);

这设置了初始状态users/1/，除非设置了cookie，否则将显示第一个经销商的信息。

我在布局组件中使用它，并且我可以将data道具传递给我的Header组件。

应用程序布局.tsx

import React, { ReactNode, useEffect, useState } from 'react';
import Logo from '../../assets/svg/logo.svg';
import { Header } from '../header/Header';
import { Footer } from '../footer/Footer';
import { Devtools } from '../devtools/Devtools';
import s from './AppLayout.scss';
import { useCookie } from 'hooks/use-cookie';
import { useFetch } from 'hooks/use-fetch';
interface AppLayoutProps {
menuItems: any;
children: ReactNode;
}
const isDev = process.env.NODE_ENV === 'development';
// tslint:disable no-default-export
export default ({ children, menuItems }: AppLayoutProps) => {
// copyright year
const [year, setDate] = useState<any>();
// setting cookie to be referenced in the useFetch hook, setting the query for dealer specific information
const [cookie] = useCookie('one-day-location', '1');
// the API call
const [query, setQuery] = useState('https://jsonplaceholder.typicode.com/users/1/');
const url = query && `https://jsonplaceholder.typicode.com/users/${cookie}`;
const { data } = useFetch(url);
const getYear = () => setDate(new Date().getFullYear());
useEffect(() => {
getYear();
}, []);
return (
<div className={s.layout}>
<Header menuItems={menuItems} data={data}></Header>
{children}
<Footer menuItems={menuItems} logo={<Logo />} year={year} />
{isDev && <Devtools />}
</div>
);
};

这是我的use-cookie钩子，在这些组件中都有引用：

使用cookie.ts

import { useState } from 'react';
import Cookies from 'universal-cookie';
/**
* Custom hook creates and returns cookie values.
*/
export const useCookie = (key: string, value: string) => {
const cookies = new Cookies();
const [cookie] = useState(() => {
if (cookies.get(key)) {
return cookies.get(key);
}
cookies.set(key, value);
});
const updateCookie = (value: string) => {
removeItem(value);
cookies.set(key, value);
};
const removeItem = (key: string) => {
cookies.remove(key);
};
return [cookie, updateCookie, removeItem];
};

如果你注意到了，它会在每次页面加载时闪烁。有没有一种方法可以以不同的方式存储和显示数据，这样它就不会这样做了？

提前谢谢。

Answer 1

因此，我能够通过一些挖掘找到更好的解决方案。我没有尝试调试我构建的钩子，而是使用axios钩子，它具有我所需要的所有相同功能，但解决了问题。在我的布局中，我得到了这样的数据：

const [cookie, updateCookie] = useCookie('one-day-location', '1');
const [{ data, loading, error }] = useAxios(
`https://jsonplaceholder.typicode.com/users/${cookie}`,
);

然后，我可以将数据传递给Header组件，但它不会多次加载API，并消除了闪烁。如果有人有任何问题，我绝对可以在这里添加更多的文档。