У меня проблема с передачей контекста в маршрут. Я получаю сообщение об ошибке, когда нажимаю ссылку, ведущую к моему компоненту, в который контекст был передан из компонента приложения. Ниже представлен этот компонент с приложением (только один импорт, чтобы показать, откуда исходит 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>
    );
  }
}

Когда я нажимаю ссылку на компонент Userlist, я получаю сообщение об ошибке, что cryptolist не определен. Я понимаю, что список пользователей не может видеть контекст после нажатия на него ссылки. Как правильно сдать?

1
Kamil Staszewski 24 Сен 2018 в 20:11

2 ответа

Лучший ответ

Вы используете маршруты в компоненте Menu. Вы действительно этого хотите? Хотя я не знаю, как работает этот слайд. Может быть, вы хотите пойти именно так. Я думаю, ваша проблема возникает из-за того, что ваш компонент Menu не упакован поставщиком. Попробуйте вот так:

<Context.Provider value={this.state}>
    <Menu />
    <Userlist />
</Context.Provider
1
devserkan 24 Сен 2018 в 17:49

Ваш компонент Menu вызовет Userlist, но поскольку он не является поставщиком, контекст не существует! Замени Userlist в Context.Provider на Menu, и все будет хорошо.

1
mcssym 24 Сен 2018 в 18:06