在 Class 组件上使用上下文

Question

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

[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>

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

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;

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

Answer 1

您正在尝试使用 AppContext，但除 defaultValues 外，您没有在其上设置任何内容。我想你会想使用 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>

Post这个改动，你就可以正确消费context

在 Class 组件上使用上下文

consuming Context on a Class Component

react-native

react-context