React类组件更新Context报错：setUser不是函数

问题根源 #

你遇到的核心问题是App组件中没有正确使用自定义的UserProvider，而是直接用UserContext.Provider传入了单独的user对象，导致子组件FooterSPA拿到的Context值里只有user数据，没有setUser方法，因此触发报错。

具体修复步骤 #

1. 修正App.js中的Provider使用

你已经封装了包含状态和更新方法的UserProvider，但App里错误地直接使用了基础的UserContext.Provider，且仅传入了user对象。将App.js中的Provider替换为自定义的UserProvider，移除自己定义的user变量：

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

class App extends Page {
  render() {
    return (
      <UserProvider>
          {this.childComponents}
          {this.childPages}
          <FooterSPA homePath={this.props.locationPathname}/>
      </UserProvider>
    );
  }
}

export default withModel(App);

2. （可选）初始化UserProvider的用户状态

如果需要设置初始用户数据，不要在App组件中定义，而是在UserProvider的state中配置，或者通过props传入初始值：

修改UserProvider支持初始值：

import React, { Component } from 'react'

const UserContext = React.createContext()

class UserProvider extends Component {
  // 支持从props传入初始用户数据
  state = {
    user: this.props.initialUser || {},
  }

  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中传入初始值：

<UserProvider initialUser={{ lastname: 'langlois', firstname:"h", loggedIn: true }}>
  {/* 子组件内容 */}
</UserProvider>

3. 确认FooterSPA的Context使用正确性

你的FooterSPA组件代码是正确的，static contextType = UserContext可以正常获取Context值。修复Provider后，this.context会同时包含user和setUser，点击按钮即可正常更新状态。

补充：Context工作机制说明 #

你创建的UserProvider是封装了Context状态和更新方法的容器组件，它会把{user, setUser}作为value传递给内部的UserContext.Provider。所有被UserProvider包裹的子组件，都能通过contextType或UserContext.Consumer获取到包含数据和方法的完整对象。而你之前直接使用UserContext.Provider并仅传入user，相当于覆盖了原本的value，自然无法获取到setUser方法。

内容的提问来源于stack exchange，提问作者Xoledas