使用 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，並消除了閃爍。 如果有人有任何問題，我絕對可以在我的回答中添加更多文檔。