Javascript 如何使用上下文API传递一个状态&；功能到多个不同的组件？

我在React上工作了6个月。我现在正在努力解决这个问题，因为上下文API对我来说是非常新的。我喜欢它，但我不知道如何正确使用它，清理和优化我的React应用程序

我有这个问题，在每个组件中使用Axios获取数据时，每个组件的功能和状态都相同

我实际上是在复制粘贴。。访问我的数据，但我想用上下文API解决这个问题

希望有人能帮助我，我想变得更好，理解这里的上下文API

我的代码：

state = {
    social_media: [],
    page_home: [],
    loading: true,
};

getCoffee() {
    return new Promise(resolve => {
        setTimeout(() => resolve('☕'), 2000); // it takes half of a second to make coffee
    });
}

async showData() {
    try {
        const wpSocial = axios(`${ACF_DATA_URL}/options/social_media_data`);
        const wpHome = axios(`${WP_DATA_URL}/pages?slug=home`);

        await this.getCoffee();

        await Promise.all([wpSocial, wpHome]).then(response => {
            this.setState({
                social_media: response[0].data.social_media_data,
                page_home: response[1].data[0],
                loading: false,
            });
        });
    } catch (e) {
        console.error(e); // Its simple, create a new context first (context.js)


const Context = React.createContext();

状态={
社交媒体：[]，
主页：[]，
加载：对，
};
getCoffee（）{
返回新承诺（解决=>{
setTimeout（（）=>resolve（）☕'), 2000）；//煮咖啡需要半秒钟
});
}
异步showData（）{
试一试{
const wpSocial=axios（`ACF_DATA_URL}/options/social_media_DATA`）；
const wpHome=axios（`${WP\u DATA\u URL}/pages？slug=home`）；
等着吧，拿咖啡来；
等待承诺。所有（[wpSocial，wpHome]）。然后（响应=>{
这是我的国家({
社交媒体：响应[0]。数据。社交媒体数据，
主页：响应[1]。数据[0]，
加载：false，
});
});
}捕获（e）{
console.error（e）；//很简单，首先创建一个新的上下文（context.js）

使用上面创建的上下文（context.js）创建一个提供者，提供者类将保存状态和方法

const Consumer = Context.Consumer;
export { Provider, Consumer };

用提供者（App.js）包装应用程序组件，这样应用程序树下的每个JSX组件都能够使用
some\u state
和
some\u方法

import { Consumer } from './{some_path}/context';

class SomeComponent extends React.Component {
  render() {
    return (
      <Consumer>
        {({some_state, some_method}) => {
          <button onClick={some_method}>{some_state}</button>
        }
      </Consumer>
    );
  }
}

很简单，首先创建一个新的上下文（context.js）

使用上面创建的上下文（context.js）创建一个提供者，提供者类将保存状态和方法

const Consumer = Context.Consumer;
export { Provider, Consumer };

用提供者（App.js）包装应用程序组件，这样应用程序树下的每个JSX组件都能够使用
some\u state
和
some\u方法

import { Consumer } from './{some_path}/context';

class SomeComponent extends React.Component {
  render() {
    return (
      <Consumer>
        {({some_state, some_method}) => {
          <button onClick={some_method}>{some_state}</button>
        }
      </Consumer>
    );
  }
}