React Context and Next JS



我正在尝试将简单的 React 上下文添加到我的应用程序中。我在"./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

但是我收到此错误"无法读取未定义的属性'更改添加按钮状态'"。我正在使用 React 16.7 和 NextJS 7.0.2。不知道出了什么问题。

第二个问题是我应该对所有内容使用一个上下文,还是仅将它们用作 MVC 模式中的模型?

我通过将 changeAddButtonState 移动到上下文组件状态来修复它,所以我的数据提供程序.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={this.state}
            >
                {this.props.children}
            </DataContext.Provider>
        )
    }
}
const DataConsumer = DataContext.Consumer
export default DataProvider
export { DataConsumer }

然后在AddButton组件中,我将代码更改为如下所示

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 {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>
                <DataConsumer>
                    {(context) => (
                        <a onClick={context.changeAddButtonState}>
                            <FontAwesomeIcon icon={faPlus} color='#fff' />
                        </a>
                    )}
                </DataConsumer>
            </div>
        )
    }
}
export default AddPostButton

最新更新