时间戳

首页 > 解决方案 > 如何在 Reactjs 中使用上下文提供者和消费者？

reactjs - 如何在 Reactjs 中使用上下文提供者和消费者？

问题描述

数据提供者.js

import React, { Component } from "react";
import {ProjectFirestore} from '../Config/Firebase';

const DataContext = React.createContext();

class DataProvider extends Component {

  state = {
    orderHistory: [],
  };

  componentDidMount() {
    this.fetchUserOrderHistory();
  }

  fetchUserOrderHistory = ()=>{
    let orderHistory = [];
    let orderRef = ProjectFirestore.collection("global-orders");
    let query = orderRef.where('user_id', '==', 'someId')
        query.get().then((querySnapshot) => {
            querySnapshot.forEach((doc) => {
                orderHistory.push({
                  id    : doc.id,
                  itemprice : doc.data().itemprice,
                });
            });

            this.setState(() => {
              return { orderHistory };
            });
        });
  };


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

const DataConsumer = DataContext.Consumer;

export { DataProvider , DataConsumer };

OrderHistory.js

import { DataConsumer } from "../contexts/DataProvider.js";

export default function OrderHistory() {

  return (
    <>
      <Header />
        <DataConsumer>
          {
            value => {
              return value.orderHistory.map( (item) =>{
                return
                (
                  <div>
                    {item.deliverycharge}
                );
              });
            }
          }
        </DataConsumer>
      </div>
      <Footer/>
    </>
  );


}

错误：无法读取未定义的属性“orderHistory”

组件DataProvider从 firebase firestore 获取数据并使用return {orderHistory}. 我希望能够使用orderHistory组件orderHistory: []中的值。问题是' orderHistory.js'中传递的值始终为空。我不想要替代品，我只需要帮助找出这个特定代码有什么问题。<DataConsumer>

标签： reactjs

解决方案

我们还需要在 .xml 中导入DataProvider以./App.js提供其封装在<DataProvider> ... </DataProvider>.

import { DataProvider } from './contexts/DataProvider.js'

export default function App() {
  return (
    <Router>
      <div className="App">
      <AuthProvider>
        <DataProvider>
          <Switch>
            <Route path="/" exact component={Home} />
            <Route path='/history' component={OrderHistory}/>
          </Switch>
        </DataProvider>
        </AuthProvider>
      </div>
    </Router>
  );
}

推荐阅读