Javascript 在AppContext中存储Axios响应_Javascript_Reactjs_Axios_React Hooks_Use Context

Javascript 在AppContext中存储Axios响应

javascript reactjs

Javascript 在AppContext中存储Axios响应,javascript,reactjs,axios,react-hooks,use-context,Javascript,Reactjs,Axios,React Hooks,Use Context,我正在尝试构建我的站点的一个部分，该部分将动态地从RESTAPI中提取联系人信息。此时，我正在使用来自的示例API 我正在尝试使用axios，特别是useAxios和makeUseAxios钩子来获取API，并将其存储在应用程序上下文中，然后我可以在整个站点中使用，最好是使用useContext钩子。此外，我需要能够根据用户交互更新API调用，允许他们选择位置，进行API更新，并将其存储在应用程序的上下文中，以便动态更新基本上，我已经得到了一个基本的useContext场景，但我正在努力解决如

我正在尝试构建我的站点的一个部分，该部分将动态地从RESTAPI中提取联系人信息。此时，我正在使用来自的示例API

我正在尝试使用

axios

，特别是

useAxios

和

makeUseAxios

钩子来获取API，并将其存储在应用程序上下文中，然后我可以在整个站点中使用，最好是使用

useContext

钩子。此外，我需要能够根据用户交互更新API调用，允许他们选择位置，进行API更新，并将其存储在应用程序的上下文中，以便动态更新

基本上，我已经得到了一个基本的

useContext

场景，但我正在努力解决如何存储JSON响应，以便在

useContext

中引用它。这是迄今为止我经历过的最接近的事情：

AppContext.tsx

import React, { createContext, ReactNode } from 'react';

import axios from 'axios';
import { makeUseAxios } from 'axios-hooks';
import { useCookie } from 'hooks/use-cookie';

export const AppContext = createContext();

export const DealerContextProvider = ({children}: any) => {
  const useAxios = makeUseAxios({
    axios: axios.create({ baseURL: 'https://jsonplaceholder.typicode.com/users/' }),
  });

  const LOCAL_STORAGE_KEY_DEALER = '_selectedDealerInformation';

  const [cookie] = useCookie('one-day-location', '1');
  const [dealerInfo] = useAxios(`${cookie}`);

  return (
    <AppContext.Provider value={[dealerInfo]}>
      {children}
    </AppContext.Provider>
  );
};

import React, { createContext } from 'react';

import axios from 'axios';
import { makeUseAxios } from 'axios-hooks';
import { useCookie } from 'hooks/use-cookie';

const contextObject = {} as any;

export const context = createContext(contextObject);

const useAxios = makeUseAxios({
  axios: axios.create({ baseURL: process.env.GATSBY_API_ENDPOINT }),
});

export const ApiContext = ({ children }: any) => {
  const [cookie] = useCookie('one-day-location', '1');

  const [{ data }] = useAxios(`${cookie}`);

  const { Provider } = context;
  return <Provider value={data}>{children}</Provider>;
};

import React, { ReactNode } from 'react';

import { ApiContext } from 'contexts/ApiContext';
import { graphql, StaticQuery } from 'gatsby';

import { Devtools } from '../devtools/Devtools';
import { Footer } from '../footer/Footer';
import { Header } from '../header/Header';
import s from './AppLayout.scss';

interface AppLayoutProps {
  children: ReactNode;
  location: string;
}

const isDev = process.env.NODE_ENV === 'development';

// tslint:disable no-default-export
export default ({ children }: AppLayoutProps) => {
  return (
    <StaticQuery
      query={`${NavQuery}`}
      render={(data) => (
        <>
          <ApiContext>
            <Header navigationContent={data.prismic.allNavigations.edges[0].node} />

            <div className={s.layout}>
              {children}

              <Footer navigationItems={data.prismic.allNavigations.edges[0].node} />

              {isDev && <Devtools />}
            </div>
          </ApiContext>
        </>
      )}
    />
  );
};

const NavQuery = graphql`
  query NavQuery {
    prismic {
      allNavigations {
        edges {
          node {
            ...NotificationBar
            ...NavigationItems
            ...FooterNavigationItems
          }
        }
      }
    }
  }
`;

import React, { ReactNode, useContext, useEffect, useState } from 'react';

import Logo from 'assets/svg/logo.svg';
import css from 'classnames';
import { Button } from 'components/button/Button';
import { Link } from 'components/link/Link';
import { MenuIcon } from 'components/menu-icon/MenuIcon';
import { context } from 'contexts/ApiContext';

import { NotificationBar } from '../notification-bar/NotificationBar';
import s from './Header.scss';
import { MainNav } from './navigation/MainNav';

interface HeaderProps {
  navigationContent: ReactNode;
}

export const Header = ({ navigationContent }: HeaderProps) => {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

  const data = useContext(context);

  console.log(data);

  const buttonLabel =  data ? data.name : 'Find a Dealer';
  const buttonLink = data ? `tel:${data.phone}` : '/find-a-dealer';

  useEffect(() => {
    const handleScroll = () => {
      const isScrolled = window.scrollY > 10;
      if (isScrolled !== scrolled) {
        setScrolled(!scrolled);
      }
    };

    document.addEventListener('scroll', handleScroll, { passive: true });

    return () => {
      document.removeEventListener('scroll', handleScroll);
    };
  }, [scrolled]);

  return (
    <>
      <NotificationBar notificationContent={navigationContent} />
      <header
        className={scrolled ? css(s.header, s.header__scrolled) : s.header}
        data-open={open ? 'true' : ''}
      >
        <nav className={s.header__navigation}>
          <ul className={s.header__container}>
            <li className={s.header__logo}>
              <Link to="/" className={s.header__link}>
                <Logo />
              </Link>
            </li>

            <li className={s.header__primary}>
              <MainNav navigationItems={navigationContent} />
            </li>

            <li className={s.header__utility}>
              <Button href={buttonLink}>{buttonLabel}</Button>
            </li>

            <li className={s.header__burger}>
              <MenuIcon onClick={() => setOpen(!open)} />
            </li>
          </ul>
        </nav>
      </header>
    </>
  );
};

import React，{createContext，ReactNode}来自“React”；
从“axios”导入axios；
从“axios挂钩”导入{makeUseAxios}；
从“hooks/use cookie”导入{useCookie}；
export const AppContext=createContext（）；
export const DealerContextProvider=（{children}:any）=>{
const useAxios=makeUseAxios({
axios:axios.create（{baseURL:'https://jsonplaceholder.typicode.com/users/' }),
});
const LOCAL_STORAGE_KEY_DEALER=''u selectedDealerInformation'；
const[cookie]=useCookie（'1-day-location'，'1'）；
const[dealerInfo]=useAxios（`${cookie}`）；
返回(
{儿童}
);
};

以及我的标题组件，我试图在其中访问它：

import React, { ReactNode, useEffect, useState, useContext } from 'react';

import { AppContext } from 'components/app-context/AppContext';

import Logo from 'assets/svg/logo.svg';
import css from 'classnames';
import { Button } from 'components/button/Button';
import { Link } from 'components/link/Link';

import { NotificationBar } from '../notification-bar/NotificationBar';
import s from './Header.scss';
import { MenuIcon } from 'components/menu-icon/MenuIcon';
import { MainNav } from './navigation/MainNav';

interface HeaderProps {
  navigationContent: ReactNode;
}

export const Header = ({ navigationContent }: HeaderProps) => {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

  const blogInfo = useContext(AppContext);
  const buttonLabel = blogInfo ? `${blogInfo.name}` : 'Find a Dealer';
  const buttonLink = blogInfo ? `tel:${blogInfo.name}` : '/find-a-dealer';

  useEffect(() => {
    const handleScroll = () => {
      const isScrolled = window.scrollY > 10;
      if (isScrolled !== scrolled) {
        setScrolled(!scrolled);
      }
    };

    document.addEventListener('scroll', handleScroll, { passive: true });

    return () => {
      document.removeEventListener('scroll', handleScroll);
    };
  }, [scrolled]);

  return (
    <>
      <NotificationBar notificationContent={navigationContent} />
      <header
        className={scrolled ? css(s.header, s.header__scrolled) : s.header}
        data-open={open ? 'true' : ''}
      >
        <nav className={s.header__navigation}>
          <ul className={s.header__container}>
            <li className={s.header__logo}>
              <Link to="/" className={s.header__link}>
                <Logo />
              </Link>
            </li>

            <li className={s.header__primary}>
              <MainNav navigationItems={navigationContent} />
            </li>

            <li className={s.header__utility}>
              <Button href={buttonLink}>{buttonLabel}</Button>
            </li>

            <li className={s.header__burger}>
              <MenuIcon onClick={() => setOpen(!open)} />
            </li>
          </ul>
        </nav>
      </header>
    </>
  );
};

import React，{ReactNode，useffect，useState，useContext}来自“React”；
从“组件/app-context/AppContext”导入{AppContext}；
从“assets/svg/Logo.svg”导入徽标；
从“类名”导入css；
从“组件/按钮/按钮”导入{Button}；
从'components/Link/Link'导入{Link}；
从“../NotificationBar/NotificationBar”导入{NotificationBar}；
从“/Header.scss”导入s；
从“组件/菜单图标/MenuIcon”导入{MenuIcon}；
从“./navigation/MainNav”导入{MainNav}；
接口头程序{
导航内容：反应节点；
}
导出常量头=（{navigationContent}:HeaderProps）=>{
const[scrolled，setScrolled]=使用状态（false）；
const[open，setOpen]=useState（false）；
const blogInfo=useContext（AppContext）；
const buttonLabel=blogInfo？`${blogInfo.name}`:'查找经销商'；
const buttonLink=blogInfo？`tel:${blogInfo.name}`:'/find-a-dealer'；
useffect（（）=>{
常量handleScroll=（）=>{
常量isScrolled=window.scrollY>10；
如果（已滚动！==已滚动）{
设置滚动（！滚动）；
}
};
addEventListener（'scroll'，handleScroll，{passive:true}）；
return（）=>{
文档。删除EventListener（“滚动”，把手滚动）；
};
}，[滚动]；
返回(






{按钮标签}


setOpen（！open）}/>


);
};

我需要的是

header\u实用程序中的按钮

动态显示所选经销商的姓名和电话号码。我可以根据需要澄清任何事情，我还没有反应过来，并且仍在学习如何表达我所需要的一切

谢谢

好吧，在过去的24小时里，我做了大量的挖掘工作，终于找到了解决办法

我有了我的上下文，为了清晰起见，现在命名为

ApiContext

ApiContext.tsx

import React, { createContext, ReactNode } from 'react';

import axios from 'axios';
import { makeUseAxios } from 'axios-hooks';
import { useCookie } from 'hooks/use-cookie';

export const AppContext = createContext();

export const DealerContextProvider = ({children}: any) => {
  const useAxios = makeUseAxios({
    axios: axios.create({ baseURL: 'https://jsonplaceholder.typicode.com/users/' }),
  });

  const LOCAL_STORAGE_KEY_DEALER = '_selectedDealerInformation';

  const [cookie] = useCookie('one-day-location', '1');
  const [dealerInfo] = useAxios(`${cookie}`);

  return (
    <AppContext.Provider value={[dealerInfo]}>
      {children}
    </AppContext.Provider>
  );
};

import React, { createContext } from 'react';

import axios from 'axios';
import { makeUseAxios } from 'axios-hooks';
import { useCookie } from 'hooks/use-cookie';

const contextObject = {} as any;

export const context = createContext(contextObject);

const useAxios = makeUseAxios({
  axios: axios.create({ baseURL: process.env.GATSBY_API_ENDPOINT }),
});

export const ApiContext = ({ children }: any) => {
  const [cookie] = useCookie('one-day-location', '1');

  const [{ data }] = useAxios(`${cookie}`);

  const { Provider } = context;
  return <Provider value={data}>{children}</Provider>;
};

import React, { ReactNode } from 'react';

import { ApiContext } from 'contexts/ApiContext';
import { graphql, StaticQuery } from 'gatsby';

import { Devtools } from '../devtools/Devtools';
import { Footer } from '../footer/Footer';
import { Header } from '../header/Header';
import s from './AppLayout.scss';

interface AppLayoutProps {
  children: ReactNode;
  location: string;
}

const isDev = process.env.NODE_ENV === 'development';

// tslint:disable no-default-export
export default ({ children }: AppLayoutProps) => {
  return (
    <StaticQuery
      query={`${NavQuery}`}
      render={(data) => (
        <>
          <ApiContext>
            <Header navigationContent={data.prismic.allNavigations.edges[0].node} />

            <div className={s.layout}>
              {children}

              <Footer navigationItems={data.prismic.allNavigations.edges[0].node} />

              {isDev && <Devtools />}
            </div>
          </ApiContext>
        </>
      )}
    />
  );
};

const NavQuery = graphql`
  query NavQuery {
    prismic {
      allNavigations {
        edges {
          node {
            ...NotificationBar
            ...NavigationItems
            ...FooterNavigationItems
          }
        }
      }
    }
  }
`;

import React, { ReactNode, useContext, useEffect, useState } from 'react';

import Logo from 'assets/svg/logo.svg';
import css from 'classnames';
import { Button } from 'components/button/Button';
import { Link } from 'components/link/Link';
import { MenuIcon } from 'components/menu-icon/MenuIcon';
import { context } from 'contexts/ApiContext';

import { NotificationBar } from '../notification-bar/NotificationBar';
import s from './Header.scss';
import { MainNav } from './navigation/MainNav';

interface HeaderProps {
  navigationContent: ReactNode;
}

export const Header = ({ navigationContent }: HeaderProps) => {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

  const data = useContext(context);

  console.log(data);

  const buttonLabel =  data ? data.name : 'Find a Dealer';
  const buttonLink = data ? `tel:${data.phone}` : '/find-a-dealer';

  useEffect(() => {
    const handleScroll = () => {
      const isScrolled = window.scrollY > 10;
      if (isScrolled !== scrolled) {
        setScrolled(!scrolled);
      }
    };

    document.addEventListener('scroll', handleScroll, { passive: true });

    return () => {
      document.removeEventListener('scroll', handleScroll);
    };
  }, [scrolled]);

  return (
    <>
      <NotificationBar notificationContent={navigationContent} />
      <header
        className={scrolled ? css(s.header, s.header__scrolled) : s.header}
        data-open={open ? 'true' : ''}
      >
        <nav className={s.header__navigation}>
          <ul className={s.header__container}>
            <li className={s.header__logo}>
              <Link to="/" className={s.header__link}>
                <Logo />
              </Link>
            </li>

            <li className={s.header__primary}>
              <MainNav navigationItems={navigationContent} />
            </li>

            <li className={s.header__utility}>
              <Button href={buttonLink}>{buttonLabel}</Button>
            </li>

            <li className={s.header__burger}>
              <MenuIcon onClick={() => setOpen(!open)} />
            </li>
          </ul>
        </nav>
      </header>
    </>
  );
};

在我的

标题

组件中，我可以使用

useContext

钩子访问数据：

Header.tsx

import React, { createContext, ReactNode } from 'react';

import axios from 'axios';
import { makeUseAxios } from 'axios-hooks';
import { useCookie } from 'hooks/use-cookie';

export const AppContext = createContext();

export const DealerContextProvider = ({children}: any) => {
  const useAxios = makeUseAxios({
    axios: axios.create({ baseURL: 'https://jsonplaceholder.typicode.com/users/' }),
  });

  const LOCAL_STORAGE_KEY_DEALER = '_selectedDealerInformation';

  const [cookie] = useCookie('one-day-location', '1');
  const [dealerInfo] = useAxios(`${cookie}`);

  return (
    <AppContext.Provider value={[dealerInfo]}>
      {children}
    </AppContext.Provider>
  );
};

import React, { createContext } from 'react';

import axios from 'axios';
import { makeUseAxios } from 'axios-hooks';
import { useCookie } from 'hooks/use-cookie';

const contextObject = {} as any;

export const context = createContext(contextObject);

const useAxios = makeUseAxios({
  axios: axios.create({ baseURL: process.env.GATSBY_API_ENDPOINT }),
});

export const ApiContext = ({ children }: any) => {
  const [cookie] = useCookie('one-day-location', '1');

  const [{ data }] = useAxios(`${cookie}`);

  const { Provider } = context;
  return <Provider value={data}>{children}</Provider>;
};

import React, { ReactNode } from 'react';

import { ApiContext } from 'contexts/ApiContext';
import { graphql, StaticQuery } from 'gatsby';

import { Devtools } from '../devtools/Devtools';
import { Footer } from '../footer/Footer';
import { Header } from '../header/Header';
import s from './AppLayout.scss';

interface AppLayoutProps {
  children: ReactNode;
  location: string;
}

const isDev = process.env.NODE_ENV === 'development';

// tslint:disable no-default-export
export default ({ children }: AppLayoutProps) => {
  return (
    <StaticQuery
      query={`${NavQuery}`}
      render={(data) => (
        <>
          <ApiContext>
            <Header navigationContent={data.prismic.allNavigations.edges[0].node} />

            <div className={s.layout}>
              {children}

              <Footer navigationItems={data.prismic.allNavigations.edges[0].node} />

              {isDev && <Devtools />}
            </div>
          </ApiContext>
        </>
      )}
    />
  );
};

const NavQuery = graphql`
  query NavQuery {
    prismic {
      allNavigations {
        edges {
          node {
            ...NotificationBar
            ...NavigationItems
            ...FooterNavigationItems
          }
        }
      }
    }
  }
`;

import React, { ReactNode, useContext, useEffect, useState } from 'react';

import Logo from 'assets/svg/logo.svg';
import css from 'classnames';
import { Button } from 'components/button/Button';
import { Link } from 'components/link/Link';
import { MenuIcon } from 'components/menu-icon/MenuIcon';
import { context } from 'contexts/ApiContext';

import { NotificationBar } from '../notification-bar/NotificationBar';
import s from './Header.scss';
import { MainNav } from './navigation/MainNav';

interface HeaderProps {
  navigationContent: ReactNode;
}

export const Header = ({ navigationContent }: HeaderProps) => {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

  const data = useContext(context);

  console.log(data);

  const buttonLabel =  data ? data.name : 'Find a Dealer';
  const buttonLink = data ? `tel:${data.phone}` : '/find-a-dealer';

  useEffect(() => {
    const handleScroll = () => {
      const isScrolled = window.scrollY > 10;
      if (isScrolled !== scrolled) {
        setScrolled(!scrolled);
      }
    };

    document.addEventListener('scroll', handleScroll, { passive: true });

    return () => {
      document.removeEventListener('scroll', handleScroll);
    };
  }, [scrolled]);

  return (
    <>
      <NotificationBar notificationContent={navigationContent} />
      <header
        className={scrolled ? css(s.header, s.header__scrolled) : s.header}
        data-open={open ? 'true' : ''}
      >
        <nav className={s.header__navigation}>
          <ul className={s.header__container}>
            <li className={s.header__logo}>
              <Link to="/" className={s.header__link}>
                <Logo />
              </Link>
            </li>

            <li className={s.header__primary}>
              <MainNav navigationItems={navigationContent} />
            </li>

            <li className={s.header__utility}>
              <Button href={buttonLink}>{buttonLabel}</Button>
            </li>

            <li className={s.header__burger}>
              <MenuIcon onClick={() => setOpen(!open)} />
            </li>
          </ul>
        </nav>
      </header>
    </>
  );
};

import React，{ReactNode，useContext，useffect，useState}来自“React”；
从“assets/svg/Logo.svg”导入徽标；
从“类名”导入css；
从“组件/按钮/按钮”导入{Button}；
从'components/Link/Link'导入{Link}；
从“组件/菜单图标/MenuIcon”导入{MenuIcon}；
从“context/ApiContext”导入{context}；
从“../NotificationBar/NotificationBar”导入{NotificationBar}；
从“/Header.scss”导入s；
从“./navigation/MainNav”导入{MainNav}；
接口头程序{
导航内容：反应节点；
}
导出常量头=（{navigationContent}:HeaderProps）=>{
const[scrolled，setScrolled]=使用状态（false）；
const[open，setOpen]=useState（false）；
const data=useContext（上下文）；
控制台日志（数据）；
const buttonLabel=data？data.name:“查找经销商”；
const buttonLink=data？`tel:${data.phone}`:'/find-a-dealer'；
useffect（（）=>{
常量handleScroll=（）=>{
常量isScrolled=window.scrollY>10；
如果（已滚动！==已滚动）{
设置滚动（！滚动）；
}
};
addEventListener（'scroll'，handleScroll，{passive:true}）；
return（）=>{
文档。删除EventListener（“滚动”，把手滚动）；
};
}，[滚动]；
返回(






{按钮标签}


setOpen（！open）}/>


);
};

我仍在进行额外的优化，特别是在加载页面时消除闪烁，以及u