0

我正在尝试使用我在称为内容的无头 cms 中设置的数据库。问题是，我看的所有教程都使用类组件来处理状态。我为 Context API 方法学习了 useContext，我发现它更吸引人，而且不那么令人头疼。我知道如何从conetextful 请求数据，但我不知道如何在使用Class 组件之外使用数据。我想我可以问的一个问题是，是否甚至可以将内容与对象或函数组件一起使用？

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')
);
4

1 回答 1

1

创建一个BsyndProvider包装器组件并在其中进行 api 调用（在 useEffect 中）并获取您的内容并将其存储在状态中。将内容传递给valueprop。

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>
  );
}

于 2020-06-07T05:48:09.723 回答