Реагируйте. js, используя context api для реализации темы dark / light, возможно ли получить данные в компоненте App, когда я использую contextprovider? - PullRequest
Новая
       21

Реагируйте. js, используя context api для реализации темы dark / light, возможно ли получить данные в компоненте App, когда я использую contextprovider?

0 голосов
/ 22 апреля 2020

Я использую контекстный API, чтобы дать моему приложению возможность переключения между темным / светлым режимом, мне удалось переключить режим во всех дочерних компонентах App компонента, но когда я попытался внедрить его в сам компонент, я потерпел неудачу, я думаю, это связано с тем фактом, что я использую contextProvider в этом компоненте, код ниже для: 

import React from 'react'
import styles from './App.module.css'
import { Card, CountryPicker, Chart } from './components/index'
import { fetchData } from './api/index'
import ThemeContextProvider, { ThemeContext } from './contexts/ThemeContext'
import ToggleTheme from './components/ToggleTheme/ToggleTheme'

export default class App extends React.Component {
  static contextType = ThemeContext

  state = {
    data: {},
    country: '',
  }
  handleCountryChange = async (country) => {
    // console.log(country)
    const Data = await fetchData(country)
    // console.log(Data)
    this.setState({ data: Data, country })
    // console.log(this.state.data, this.state.country)
  }
  async componentDidMount() {
    const data = await fetchData();
    this.setState({ data })

  }
  render() {
    const { data, country } = this.state;
    // problem here
    const { isLightTheme, dark, light } = this.context;

    return (
      <ThemeContextProvider>
        <div className={styles.container}  >
          <ToggleTheme />
          <Card data={data} />
          <CountryPicker handleCountryChange={this.handleCountryChange} />
          <Chart data={data} country={country} />
        </div>
      </ThemeContextProvider>
    )
  }
}

1 Ответ

0 голосов
/ 23 апреля 2020

Я понял, решение было очень простым, просто импортировав компонент App в другой компонент Main, обернув его <ContextProvider></ContextProvider> и импортировав в index.js

...