Question

我的应用程序正在使用React Router（Router.js），我正在尝试使用Context API实现CentralStore，以将状态传递给Router呈现的Event.js组件。

如何将上下文使用者传递给仅由React Router呈现的组件（Event.js）？现在，在Event.js中未定义AppContext。

实时代码：https://codesandbox.io/s/0x83zz0jmw

Pipfile.lock

Answer 1

通过从CentralStore组件导出AppContext解决了问题

// The missing export

export const AppContext = React.createContext();

class CentralStore extends React.Component {
  state={
    events: false,
  }

  componentDidMount() {
    firebase
      .collection("events")
      .get()      
      .then( querySnapshot => {
        const events = [];
        querySnapshot.docs.forEach(doc => {
          events.push(doc.data());
        });
        this.setState({
          events: events
        });
      });
  }

  render(){
    return(
      <AppContext.Provider value={{
        state: this.state
      }}>
        {this.props.children}
      </AppContext.Provider>
    )
  }
}

如何将上下文使用者传递给仅由React Router呈现的组件（Event.js）？

1 个答案: