如何在react js中使用context api

Question

import React, { useEffect, useState } from "react";
import axios from "axios";

export const Context = React.createContext();

const Jokefetch = () => {
  const [joke, setjoke] = useState([]);
  const dadjokes = async () => {
    const num = Math.floor(Math.random() * 20) + 1;
    const res = await axios.get(
      `https://icanhazdadjoke.com/search?page=${num}&limit=30`,
      {
        headers: { Accept: "application/json" },
      }
    );
    const jokesList = res.data.results.map((val) => {
      return {
        ...val,
        vote: 0,
        emoji: "😓",
      };
    });
    setjoke(jokesList);
  };
  useEffect(() => {
    dadjokes();
  }, []);

  return (
    <>
      <div>
        <button
          onClick={
            dadjokes();
          }
        >
          GET-J O K E S
        </button>
      </div>
    </>
  );
};

export default Jokefetch;
const App = () => {
  return (
    <div> <Jokefetch/></div>
  )
}

export default App

我创建了一个 JOKEFETCH 函数，它从 api 获取数据（obj 数组），每当我点击 GET-JOKES 按钮时，该函数总是新的。新数据通过 setjoke func 存储在 usestate hook 的笑话中。我想通过上下文 api(usecontext) 在我的主应用程序组件中返回这些数据，以便我可以在我的主组件中进行进一步的操作

Answer 1

我已经在以下代码和框中实现了这种情况下的useContext： https://codesandbox.io/s/awesome-gauss-yid23o?file=/src/App.js:0-191

随意使用代码。

说明：

您可以使用 useContext 钩子创建一个名为 AppContext.js 的新文件，其中包含获取所有笑话并将其存储在笑话状态中的函数，如下所示：

Appcontext.js

import { createContext, useState } from "react";
import axios from "axios";

export const AppContext = createContext(null);

export const AppContextProvider = ({ children }) => {
  const [joke, setJoke] = useState([]);
  const dadjokes = async () => {
    const num = Math.floor(Math.random() * 20) + 1;
    const res = await axios.get(
      `https://icanhazdadjoke.com/search?page=${num}&limit=30`,
      {
        headers: { Accept: "application/json" }
      }
    );

    const jokesList = res.data.results.map((val) => {
      return {
        ...val,
        vote: 0,
        emoji: "😓"
      };
    });
    setJoke(jokesList);
  };

  dadjokes();

  return <AppContext.Provider value={joke}>{children}</AppContext.Provider>;
};

这将从 api 中提取笑话并将笑话状态值设置为对象数组。然后我们将笑话状态作为 value prop 传递给 AppContext.Provider

现在使用 AppContextProvider 包装 index.js App 组件，如下所示：

Index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";
import { AppContextProvider } from "./AppContext";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <AppContextProvider>  wrapped the App component
      <App />
    </AppContextProvider>
  </StrictMode>
);

这将使我们能够制作组件并在我们想要的任何组件中使用 AppContext 值。

现在创建一个名为 Jokefetch.js 的新组件，如下所示：

Jokefetch.js

import React, { useContext, useState } from "react";
import { AppContext } from "./AppContext";

const Jokefetch = () => {
  const joke = useContext(AppContext);

  const [displayJokes, setDisplayJokes] = useState(false);

  const handleJokes = async () => {
    setDisplayJokes(true);
    console.log(joke);
  };

  return (
    <>
      <div>
        <button onClick={handleJokes}>GET-J O K E S</button>
        {displayJokes ? joke.map((item) => <p>{item.joke}</p>) : null}
      </div>
    </>
  );
};

export default Jokefetch;

在这里，我们使用map函数映射了笑话。 handleJokes 函数会将 displayJokes 状态值设置为 true，如果为 true，则笑话数组将映射到段落标记中的页面。

注意这里 -> 我们使用了 useContext 钩子从 AppContext.Provider 中提取 AppContext 的值。此 useContext 挂钩可用于在任何组件中提取 AppContext 的值。您也可以使用

const joke = useContext(AppContext);

在 App 组件中使用此值

现在在 App.js 中添加 Jokefetch 组件，如下所示：

App.js

import Jokefetch from "./Jokes";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <div>
        <Jokefetch />
      </div>
    </div>
  );
}