我正在遵循我在网上找到的不同教程，在ReactJS中使用"上下文"，但当我想更新子页面中的上下文时，我无法使其发挥作用.我用来作为基础的代码来自这里:https://www.taniarascia.com/using-context-api-in-react/ 我使用类组件，下面是我所拥有的:

上下文的组件:

import React, { Component } from 'react'

const UserContext = React.createContext()

class UserProvider extends Component {
  // Context state
  state = {
    user: {},
  }

  // Method to update state
  setUser = (user) => {
    this.setState((prevState) => ({ user }))
  }

  render() {
    const { children } = this.props
    const { user } = this.state
    const { setUser } = this

    return (
      <UserContext.Provider
        value={{
          user,
          setUser,
        }}
      >
        {children}
      </UserContext.Provider>
    )
  }
}

export default UserContext
export { UserProvider }

我的App.js:

import FooterSPA from './components/FooterSPA/FooterSPA'

import UserContext, {UserProvider}  from './components/Context/UserContext'

// This component is the application entry point
class App extends Page {

  render() {

    const user = { lastname: 'langlois', firstname:"h", loggedIn: true }
    //const {user, setUser} = useState({ lastname: 'langlois', firstname:"hugo", loggedIn: true });

    return (
      <UserContext.Provider value={user}>
          {this.childComponents}
          {this.childPages}
          <FooterSPA homePath={this.props.locationPathname}/>
      </UserContext.Provider>
    );
  }
}

export default withModel(App);

最后，我try 执行FooterSPA操作的组件:

import React, {Component} from 'react';
import {Link} from 'react-router-dom';

import UserContext from '../Context/UserContext'

require('./FooterSPA.css');

export default class Footer extends Component {

  static contextType = UserContext

  render() {

    console.log(this.context);

    const { user, setUser } = this.context

    return (
        <div>
            <button
              onClick={() => {
                const newUser = { name: 'Joe', loggedIn: true }
                setUser(newUser)
              }}
            >
              Update User
            </button>
            <div className="footerspa">
                <div className="footercontainer">
                    <Link to={this.props.homePath}>Back to Home Page</Link>
                </div>
            </div>
        </div>
    );
  }
}

我一直有一个错误，说在FooterSP.js中，"setUser"不是一个函数. 我试图使用"this.setUser"或"this.context.setUser"，但它们是一样的. 我的react 非常 fresh ，我想我错过了一些明显的东西，但我找不到什么. 此外，我不确定我创建的Conext.js组件是如何工作的，所以这很难，所以请为我排除故障.

希望有人能帮到我，提前谢谢！ HL

我试着更改我的App.js，或者传递函数，但我对Reaction一无所知，因此我甚至不知道如何开始