如何将 Contentful api 数据与 React Context API（尤其是 useContext）一起使用？

Question

我正在尝试使用我在名为 contentful 的无头 cms 中设置的数据库。问题是，我看过的所有教程都使用 Class 组件来处理状态。我为 Context API 方法学习了 useContext，我发现它更吸引人，也不那么令人头疼。我知道如何从 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>
  );
}

如何将 Contentful api 数据与 React Context API（尤其是 useContext）一起使用？

How do I use the Contentful api data with React Context API (useContext in particular)?

reactjs

api

react-hooks

react-context

use-context