如何在React中使用Context API传递Jokefetch组件的API数据

要实现把Jokefetch组件内的joke状态传递给App组件，需要调整Context的使用逻辑，同时修正代码里的按钮点击错误，具体方案如下：

1. 修正按钮点击事件的错误 #

原代码中按钮的onClick直接执行dadjokes()会导致组件渲染时就调用该函数，需改为箭头函数包裹，确保只有点击时触发：

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

2. 修改Jokefetch组件，作为Context提供者 #

让Jokefetch返回Context.Provider，将joke状态和数据刷新方法dadjokes作为上下文值传递，同时通过children属性允许App组件嵌套在Provider内部：

// Jokefetch.jsx
import React, { useEffect, useState } from "react";
import axios from "axios";

export const Context = React.createContext();

const Jokefetch = ({ 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) => ({
      ...val,
      vote: 0,
      emoji: "😓",
    }));
    setjoke(jokesList);
  };

  useEffect(() => {
    dadjokes();
  }, []);

  return (
    <Context.Provider value={{ joke, dadjokes }}>
      <div>
        <button onClick={() => dadjokes()}>GET-J O K E S</button>
      </div>
      {children}
    </Context.Provider>
  );
};

export default Jokefetch;

3. 在App组件中消费Context数据 #

在App组件中通过useContext钩子获取上下文里的joke状态，即可对数据执行后续操作：

// App.jsx
import React, { useContext } from "react";
import Jokefetch, { Context } from "./Jokefetch";

const App = () => {
  const { joke } = useContext(Context);

  // 这里可对joke数据执行后续操作，比如渲染列表、修改投票数等
  return (
    <Jokefetch>
      <div>
        <h2>获取到的笑话</h2>
        {joke.length > 0 ? (
          <ul>
            {joke.map((item) => (
              <li key={item.id}>
                {item.joke} <span>{item.emoji}</span> 投票数：{item.vote}
              </li>
            ))}
          </ul>
        ) : (
          <p>加载中...</p>
        )}
      </div>
    </Jokefetch>
  );
};

export default App;

说明 #

• 调整后App组件嵌套在Jokefetch的Provider内部，可直接访问Context中的joke状态和dadjokes刷新方法；
• 若需要在App内触发数据刷新，直接调用dadjokes方法即可；
• 拆分两个组件为独立文件，避免单个文件存在多个export default的语法错误。

内容的提问来源于stack exchange，提问作者Ali Mehdi