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

，可以通过以下步骤实现：

首先，需要创建一个用于存储API数据的上下文(Context)。可以使用React的createContext函数创建一个上下文对象，并提供一个默认值。

import React, { createContext } from 'react';

const ApiContext = createContext();

export default ApiContext;

接下来，创建一个包含API请求逻辑的自定义钩子(useApi)。该钩子将使用fetch或axios等工具发送HTTP请求，并将获取的数据存储在上下文中。

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;

在需要使用API数据的组件中，使用useContext钩子获取上下文中的数据，并在useEffect钩子中调用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;

在上面的代码中，我们通过调用useApi钩子来获取API数据，并在useEffect钩子中将数据存储在上下文中。然后，我们使用useContext钩子获取上下文中的数据，并在组件中使用它进行渲染和操作。

这种方法可以使组件在挂载时自动获取API数据，并在数据更新时重新渲染。同时，通过使用上下文，可以在组件树的任何地方访问和使用API数据。

腾讯云相关产品和产品介绍链接地址：