javascript - 将 React api 上下文与 React Router 一起使用

Question

我在将上下文传递给路由时遇到问题。当我单击转到我的组件(其中上下文从应用程序组件传递)的链接时，出现错误。下面是带有 App 的组件(只有一个导入只是为了显示 Context 来自哪里):

App.js

import { Context } from './Context';
class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
       cryptolist: []
    }
  }

  componentDidMount = () => {
    fetch('https://api.coinmarketcap.com/v2/ticker/?structure=array')
      .then(response => response.json())
      .then(json => this.setState({
        cryptolist: json.data
      }))
  }

  render() {
    return (
      <div>
        <Menu />
        <Context.Provider value={this.state}>
          <Userlist />
        </Context.Provider>
      </div>
    )
  }
}

export default App;

Userlist.js(应该是 cryptolist 或其他)

import { Context } from '.././Context'



export default class Userlist extends Component {
  render() {
    return (
      <main>
        <Context.Consumer>
          {(context) => context.cryptolist.map(el => {
              return (
                  <div>
                      <h2>{el.name}</h2>
                      <h5>{el.symbol}</h5>
                      <h3>{el.quotes.USD.price}</h3>
                  </div>
              )
          })}
        </Context.Consumer>
      </main>
    )
  }
}

Context.js

import React from 'react';

export const Context = React.createContext();

这里一切正常，直到我想制作一个链接到该组件的菜单。

import React from "react";
import { slide as Slider } from 'react-burger-menu';
import { BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";
import Main from './main';
import Userlist from './userlist';



export default class Menu extends React.Component {
  render () {
    return (
        <Router>
        <div className="bg-navy w-100 h-100">
          <Slider width={ 180 } isOpen={ false }>
            <Link className="menu-item" to="/main">Home</Link>
            <Link className="menu-item" to="/crypto">About</Link>
          </Slider>
             <Switch>
                <Route path="/main" component={Main} />
                <Route path="/crypto" component={Userlist} />
             </Switch>
          </div>
      </Router>
    );
  }
}

当我单击组件用户列表的链接时，我收到一条错误，指出加密列表未定义。我发现用户列表在单击链接后看不到上下文。如何正确通过？

Answer 1

您正在使用 Menu 组件中的路由。这真的是你想要的吗？不过，我不知道这个幻灯片是如何工作的。也许这就是你想要走的路。我认为出现您的问题是因为您的 Menu 组件未由提供程序包装。尝试这样:

<Context.Provider value={this.state}>
    <Menu />
    <Userlist />
</Context.Provider