React native 在类组件上使用上下文

我不熟悉上下文，所以可能是一个非常容易的错误。我在尝试更新上下文时遇到此错误：

[Unhandled promise rejection: TypeError: setUserInfo is not a function. (In 'setUserInfo(newUser)', 'setUserInfo' is undefined)]

以下是我所做的： AppContext.js

import React, { Component } from 'react'

const AppContext = React.createContext();

class UserProvider extends Component {
  // Context state
  state = {
    userInfo: {},
    userChats: {},
    userSettings: {},
  }

  // Method to update state
  setUserInfo = (user) => {
    this.setState((prevState) => ({ user }))
  }
  
  // Method to update state
  setUserChats = (userChats) => {
    this.setState((prevState) => ({ userChats }))
  }
  
  // Method to update state
  setUserSettings = (settings) => {
    this.setState((prevState) => ({ settings }))
  }
  
  render() {
    const { children } = this.props
    const { userInfo } = this.state
    const { setUserInfo } = this
    const { userChats } = this.state
    const { setUserChats } = this
    const { userSettings } = this.state
    const { setUserSettings } = this

    return (
      <UserContext.Provider
        value={{
          userInfo,
          setUserInfo,
          userChats,
          setUserChats,
          userSettings,
          setUserSettings,
        }}
      >
        {children}
      </UserContext.Provider>
    )
  }
}

export default AppContext

export { UserProvider }

---

那么我如何解决这个错误呢？似乎找不到更新值的方法，但它已定义。

您正在尝试使用AppContext，但除了DefaultValue之外，您还没有在itt上设置任何内容。我想您应该使用UserProvider并在其中使用AppContext

import React, { Component } from 'react'

const AppContext = React.createContext();

class UserProvider extends Component {
  // Context state
  state = {
    userInfo: {},
    userChats: {},
    userSettings: {},
  }

  // Method to update state
  setUserInfo = (user) => {
    this.setState((prevState) => ({ user }))
  }
  
  // Method to update state
  setUserChats = (userChats) => {
    this.setState((prevState) => ({ userChats }))
  }
  
  // Method to update state
  setUserSettings = (settings) => {
    this.setState((prevState) => ({ settings }))
  }
  
  render() {
    const { children } = this.props
    const { userInfo } = this.state
    const { setUserInfo } = this
    const { userChats } = this.state
    const { setUserChats } = this
    const { userSettings } = this.state
    const { setUserSettings } = this

    return (
      <AppContext.Provider
        value={{
          userInfo,
          setUserInfo,
          userChats,
          setUserChats,
          userSettings,
          setUserSettings,
        }}
      >
        {children}
      </AppContext.Provider>
    )
  }
}

export default AppContext;

export { UserProvider };

import React，{Component}来自“React”
const AppContext=React.createContext（）；
类UserProvider扩展组件{
//上下文状态
状态={
用户信息：{}，
用户聊天：{}，
用户设置：{}，
}
//方法更新状态
setUserInfo=（用户）=>{
this.setState（（prevState）=>（{user}））
}
//方法更新状态
setUserChats=（userChats）=>{
this.setState（（prevState）=>（{userChats}））
}
//方法更新状态
setUserSettings=（设置）=>{
this.setState（（prevState）=>（{settings}））
}
render（）{
const{children}=this.props
const{userInfo}=this.state
const{setUserInfo}=此
const{userChats}=this.state
const{setUserChats}=此
const{userSettings}=this.state
const{setUserSettings}=this
返回(
{儿童}
)
}
}
导出默认AppContext；
导出{UserProvider}；

---

---

发布此更改后，您将能够正确使用上下文

谢谢！错误消失了！但是上下文没有更新，我得到的控制台日志是：context！！！：{}新上下文！！！！！：{}........ 可能是异步问题？

setUserInfo（newUser）；log（“新上下文！！！：”+JSON.stringify（userInfo））如果您希望新的用户值立即反映setUserInfo之后的值，那么它将不起作用，因为setState是异步的。您可以查看更多详细信息great！谢谢
import React, { Component} from 'react';

import AppContext from '../Context/AppContext.js'

class startScreen extends Component {
    static contextType = AppContext
     
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    async componentDidMount() {
        const { userInfo, setUserInfo } = this.context
        
        console.log("CONTEXT!!!!! : " + JSON.stringify(userInfo));
    
        const newUser = { name: 'Joe', loggedIn: true };
        
        setUserInfo(newUser);  // ERROR fired: [Unhandled promise rejection: TypeError: setUserInfo is not a function. (In 'setUserInfo(newUser)', 'setUserInfo' is undefined)]

        console.log("NEW     CONTEXT!!!!! : " + JSON.stringify(userInfo));
    

    }

   render() {
        return(null);
   }
}

export default startScreen;

import React, { Component } from 'react'

const AppContext = React.createContext();

class UserProvider extends Component {
  // Context state
  state = {
    userInfo: {},
    userChats: {},
    userSettings: {},
  }

  // Method to update state
  setUserInfo = (user) => {
    this.setState((prevState) => ({ user }))
  }
  
  // Method to update state
  setUserChats = (userChats) => {
    this.setState((prevState) => ({ userChats }))
  }
  
  // Method to update state
  setUserSettings = (settings) => {
    this.setState((prevState) => ({ settings }))
  }
  
  render() {
    const { children } = this.props
    const { userInfo } = this.state
    const { setUserInfo } = this
    const { userChats } = this.state
    const { setUserChats } = this
    const { userSettings } = this.state
    const { setUserSettings } = this

    return (
      <AppContext.Provider
        value={{
          userInfo,
          setUserInfo,
          userChats,
          setUserChats,
          userSettings,
          setUserSettings,
        }}
      >
        {children}
      </AppContext.Provider>
    )
  }
}

export default AppContext;

export { UserProvider };

<UserProvider>
    <Container>
        <AppNavigator />
    </Container>
</UserProvider>