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（应为加密列表或其他内容）

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

Answer 2

您的Menu组件将调用Userlist，但由于不在提供程序中，因此上下文不存在！将Userlist中的Context.Provider替换为Menu，一切都会好的。

将React API上下文与React Router一起使用

2 个答案: