Передайте значение из компонента в контекст и используйте значение в методе componentDidMount () - PullRequest
Новая
       17

Передайте значение из компонента в контекст и используйте значение в методе componentDidMount ()

1 голос
/ 15 апреля 2020

Я получаю путь в компоненте WorldPage и передаю это значение в context.jsx, в котором я хочу запрашивать данные, используя путь.

Однако я не могу получить правильное значение в componentDidMount () method.

console.log (this.state.tab) должен быть / world, но все же /home.

import axios from "axios";

export const Context = React.createContext();

export class Provider extends Component {
  state = {
    news_list: [],
    tab: "/home",
    tabChange: (tabName) => {
      if (this.state.tab !== tabName) {
        this.setState({
          tab: tabName,
        });
      }
    },
  };

  componentDidMount() {
    console.log(this.state.tab);
    axios
      .get(this.state.tab)
      .then((res) => {
        console.log(res.data);
        this.setState({
          news_list: res.data,
        });
        // console.log(this.state.news_list);
      })
      .catch((err) => console.log(err));
  }

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

export const Consumer = Context.Consumer;

import React, { Component } from "react";
import News from "../News/News";
import { Consumer } from "../../context";

export default class WorldPage extends Component {
  render() {
    const tabName = window.location.pathname;
    return (
      <Consumer>
        {(value) => {
          const { tabChange } = value;
          tabChange(tabName);
          console.log(tabName);
          return (
            <React.Fragment>
              <News />
            </React.Fragment>
          );
        }}
      </Consumer>
    );
  }
}
...