在类组件上使用上下文

Posted 2023-04-14

【中文标题】在类组件上使用上下文

【英文标题】：consuming Context on a Class Component

【发布时间】：2021-06-16 16:30:30

【问题描述】：

我是上下文新手，所以可能是一个非常容易出错的错误。尝试更新上下文时出现此错误：

[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 

包装应用组件：

const defaultProviderValue = userInfo: , userChats: , userSettings:  

<AppContext.Provider value = defaultProviderValue>
    <Container>
        <AppNavigator />
    </Container>
</AppContext.Provider>

然后最后尝试在类组件上更新它：

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;

那么我该如何解决这个错误呢？好像找不到更新值的方法，但是已经定义好了。

【参考方案1】：

您正在尝试使用 AppContext，但除了 defaultValues 之外，您没有在 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 ;

---

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

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

【讨论】：

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

setUserInfo(newUser); console.log("NEW CONTEXT!!!!! : " + JSON.stringify(userInfo)); 如果您希望新的用户值在 setUserInfo 之后立即反映，因为 setState 是异步的，所以它不会起作用。您可以查看this post了解更多详情

太棒了！谢谢！！