如何通过React Context api (特别是useContext)使用Contentful API数据？

npm install contentful

yarn add contentful

import { createClient } from 'contentful';

const client = createClient({
  space: 'YOUR_SPACE_ID',
  accessToken: 'YOUR_ACCESS_TOKEN'
});

import React, { createContext, useEffect, useState } from 'react';

const ContentfulContext = createContext();

const ContentfulProvider = ({ children }) => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // 使用Contentful SDK获取数据
    client.getEntries()
      .then(response => setData(response.items))
      .catch(error => console.log(error));
  }, []);

  return (
    <ContentfulContext.Provider value={data}>
      {children}
    </ContentfulContext.Provider>
  );
};

export { ContentfulContext, ContentfulProvider };

import React, { useContext } from 'react';
import { ContentfulContext } from './ContentfulProvider';

const MyComponent = () => {
  const data = useContext(ContentfulContext);

  return (
    <div>
      {data.map(item => (
        <div key={item.sys.id}>
          <h2>{item.fields.title}</h2>
          <p>{item.fields.description}</p>
        </div>
      ))}
    </div>
  );
};

export default MyComponent;