Реагировать на контекст и следующий JS

Question

Я пытаюсь добавить простой React Context в свое приложение. Я создаю Контекст в "./components/DataProvider.js", который выглядит следующим образом:

import React, { Component } from 'react'

const DataContext = React.createContext()

class DataProvider extends Component {
    state = {
        isAddButtonClicked: false
    }

    changeAddButtonState = () => {
        if( this.state.isAddButtonClicked ) {
            this.setState({
                isAddButtonClicked: false
            })
        } else {
            this.setState({
                isAddButtonClicked: true
            })            
        }
    }

    render() {
        return(
            <DataContext.Provider
                value={{
                    isAddButtonClicked: this.state.isAddButtonClicked,
                    changeAddButtonState: () => {
                        if( this.state.isAddButtonClicked ) {
                            this.setState({
                                isAddButtonClicked: false
                            })
                        } else {
                            this.setState({
                                isAddButtonClicked: true
                            })            
                        }
                    }
                }}
            >
                {this.props.children}
            </DataContext.Provider>
        )
    }

}

const DataConsumer = DataContext.Consumer

export default DataProvider
export { DataConsumer }

Который потом я добавил в "./pages/_app.js"

import App, { Container } from 'next/app'

import DataProvider from '../components/DataProvider'

class MyApp extends App {
render () {
    const { Component, pageProps } = this.props
    return (
    <Container>
        <DataProvider>
        <Component {...pageProps} />
        </DataProvider>
    </Container>
    )
}
}

export default MyApp

И использовать его в "./components/AddPostButton.js".

import React, {Component} from 'react'
import { DataConsumer } from './DataProvider'

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPlus } from '@fortawesome/free-solid-svg-icons'

class AddPostButton extends Component {
    render() {
        return (
            <div>
                <DataConsumer>
                    {({ changeAddButtonState }) => (
                        <a onClick={changeAddButtonState}>
                            <FontAwesomeIcon icon={faPlus} color='#fff' />
                        </a>
                    )}
                </DataConsumer>
            </div>

        )
    }

}

export default AddPostButton

Но я получаю эту ошибку "Невозможно прочитать свойство 'changeAddButtonState' из неопределенного". Я использую React 16.7 и NextJS 7.0.2. Не знаю, что не так.

Второй вопрос: должен ли я использовать один Контекст для всего или просто использовать их в качестве модели в шаблоне MVC?

Answer 1

Я исправил это, переместив changeAddButtonState в состояние компонента контекста, чтобы мой DataProvider.js теперь выглядел так