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

Question

我正在盖茨比为我的公司建立一个新的营销网站，利用axios从 REST api 获取数据以动态显示经销商列表，然后在整个网站上动态显示所选经销商的联系信息。 这是通过设置一个cookie来完成的，cookie中带有API上经销商的ID，然后会根据cookie获取该经销商的信息。 但是，我遇到了一个问题，即我目前在 header 中显示的经销商名称在每次加载页面时都会闪烁。 它看起来很糟糕，所以我想知道是否有办法缓存该数据，或者不强制它在每次页面加载时获取并消除闪烁。 我还在开发中，所以我已经在 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);

这设置了初始 state 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-hooks ，它具有我需要的所有相同功能，但可以解决问题。 在我的布局中，我已经像这样获取数据：

const [cookie, updateCookie] = useCookie('one-day-location', '1');

const [{ data, loading, error }] = useAxios(
  `https://jsonplaceholder.typicode.com/users/${cookie}`,
);

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