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

Question

我正在尝试使用我在一个叫做contentful的无头内容管理系统中建立的数据库。问题是，我看过的所有教程都使用类组件来处理状态。我学习useContext是为了使用Context API方法，我发现它更吸引人，也不那么让人头疼。我知道如何从conetextful请求数据，但我不知道如何在使用Class组件之外使用数据。我想我可以问的一个问题是，是否可以在对象或函数组件中使用contentful？

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router} from 'react-router-dom';
import App from './App';
import 'w3-css';
import {BsyndContext} from './context/bsyndContext';
import Client from './Contentful';

Client.getEntries().then(res => console.log(res.items))

ReactDOM.render(
<BsyndContext.Provider value={"data here"} > 
 <Router> 
    <App />
    </Router>
  </BsyndContext.Provider>
 ,
  document.getElementById('root')
);

Answer 1

创建一个BsyndProvider包装器组件并在其中进行api调用(在useEffect中)，获取内容并将其存储在状态中。将内容传递给value prop。

import Client from './Contentful';
export default const BsyndContext = React.createContext({});


export const BsyndProvider = (props) => {
    const [value,setValue] = useState({});

    useEffect(() => {
        Client.getEntries().then(res => setValue(res.items))
    }, []);

    return (
      <BsyndContext.Provider value={value}>
        {props.children}
      </BsyndContext.Provider>
    );
}

将应用程序包装在BsyndContext.Provider中。

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router} from 'react-router-dom';
import App from './App';
import 'w3-css';
import {BsyndProvider} from './context/bsyndContext';


ReactDOM.render(
  <BsyndProvider> 
    <Router> 
        <App />
    </Router>
  </BsyndProvider>
 ,
  document.getElementById('root')
);

在您的组件中使用上下文(您的内容)，如下所示：

function App() {
  const myContent = useContext(BsyndContext);

  return (
    <div>
      {myContent.Heading}
    </div>
  );
}