如何使用UseContext或其他方案使接口返回的data在整个React项目中全局可访问？

Hey there! Let's work through how to make that fetched data accessible across your entire React project—since your initial useContext attempt didn't go as planned, I'll walk you through a few solid solutions, including fixing the context approach you tried first.

Option 1: Fixing Your useContext Implementation #

Chances are the issue was how you were integrating the async data fetch with context. Context works best when tied to component lifecycle methods, so let's structure it properly:

First, create a dedicated context and provider component:

// src/contexts/ItemsContext.js
import { createContext, useContext, useState, useEffect } from 'react';
import api from '../services/api';

const ItemsContext = createContext();

export function ItemsProvider({ children }) {
  const [itemsData, setItemsData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  // Fetch data when the provider mounts
  useEffect(() => {
    const fetchItems = async () => {
      try {
        const data = await api.get("/list-results");
        setItemsData(data);
      } catch (err) {
        setError(err);
      } finally {
        setIsLoading(false);
      }
    };

    fetchItems();
  }, []);

  // Pass data and state to child components
  return (
    <ItemsContext.Provider value={{ itemsData, isLoading, error }}>
      {children}
    </ItemsContext.Provider>
  );
}

// Custom hook to access the context easily
export function useItems() {
  return useContext(ItemsContext);
}

Next, wrap your root component (like App.js) with the provider to make the data available everywhere:

// src/App.js
import { ItemsProvider } from './contexts/ItemsContext';
import MainContent from './components/MainContent';

function App() {
  return (
    <ItemsProvider>
      <MainContent />
    </ItemsProvider>
  );
}

export default App;

Now you can access the data in any child component:

// src/components/MainContent.js
import { useItems } from '../contexts/ItemsContext';

function MainContent() {
  const { itemsData, isLoading, error } = useItems();

  if (isLoading) return <div>Loading items...</div>;
  if (error) return <div>Oops, failed to load items: {error.message}</div>;

  return (
    <div>
      <h2>Items List</h2>
      <pre>{JSON.stringify(itemsData, null, 2)}</pre>
    </div>
  );
}

export default MainContent;

Option 2: Use a Lightweight State Management Tool (Zustand) #

If you want something simpler than context (especially for larger projects), Zustand is a great choice—it doesn't require wrapping your app in providers.

First install it:

npm install zustand

Create a store to handle the data fetch and state:

// src/store/itemsStore.js
import { create } from 'zustand';
import api from '../services/api';

const useItemsStore = create((set) => ({
  itemsData: null,
  isLoading: true,
  error: null,
  fetchItems: async () => {
    try {
      const data = await api.get("/list-results");
      set({ itemsData: data, isLoading: false });
    } catch (err) {
      set({ error: err, isLoading: false });
    }
  },
}));

export default useItemsStore;

Use it in any component:

// src/components/MainContent.js
import useItemsStore from '../store/itemsStore';
import { useEffect } from 'react';

function MainContent() {
  const { itemsData, isLoading, error, fetchItems } = useItemsStore();

  useEffect(() => {
    // Fetch only if data isn't already cached
    if (!itemsData) fetchItems();
  }, []);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return <div>{itemsData && <p>Fetched {itemsData.length} items!</p>}</div>;
}

Option 3: Singleton Service for Cross-Environment Access #

If you need the data accessible outside React components too (like utility functions), a singleton service works well:

// src/services/itemsService.js
import api from './api';

class ItemsService {
  #cachedData = null;
  #isLoading = false;
  #error = null;

  async fetchItems() {
    // Return cached data if it exists
    if (this.#cachedData) return this.#cachedData;
    
    this.#isLoading = true;
    try {
      const data = await api.get("/list-results");
      this.#cachedData = data;
      return data;
    } catch (err) {
      this.#error = err;
      throw err;
    } finally {
      this.#isLoading = false;
    }
  }

  getCachedItems() {
    return this.#cachedData;
  }

  isLoading() {
    return this.#isLoading;
  }

  getError() {
    return this.#error;
  }
}

// Export a single instance of the service
export default new ItemsService();

Use it in components:

// src/components/MainContent.js
import itemsService from '../services/itemsService';
import { useState, useEffect } from 'react';

function MainContent() {
  const [itemsData, setItemsData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const loadItems = async () => {
      try {
        const cached = itemsService.getCachedItems();
        if (cached) {
          setItemsData(cached);
        } else {
          const data = await itemsService.fetchItems();
          setItemsData(data);
        }
      } catch (err) {
        setError(err);
      } finally {
        setIsLoading(false);
      }
    };

    loadItems();
  }, []);

  // Render logic here...
}

内容的提问来源于stack exchange，提问作者Raul Lopes