从REST API填充上下文，并通过useEffect和useContext在React组件中使用它

import React, { createContext } from 'react';

const ApiContext = createContext();

export default ApiContext;

import { useState, useEffect } from 'react';

const useApi = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, [url]);

  return data;
};

export default useApi;

import React, { useContext, useEffect } from 'react';
import ApiContext from './ApiContext';
import useApi from './useApi';

const MyComponent = () => {
  const apiUrl = 'https://api.example.com/data';
  const apiData = useApi(apiUrl);
  const apiContext = useContext(ApiContext);

  useEffect(() => {
    if (apiData) {
      apiContext.setData(apiData);
    }
  }, [apiData, apiContext]);

  // 使用上下文中的数据进行渲染和操作
  return (
    <div>
      {apiContext.data && (
        <ul>
          {apiContext.data.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default MyComponent;