为什么我不能访问上下文的方法或属性

Question

我正在尝试使用 React 的上下文 api 来管理全局状态。当我尝试调用上下文方法或访问上下文属性时，我收到错误消息“this.context.setUser 函数不存在”或“未定义”。

然而，我已经能够将值硬编码到上下文的状态中并检索硬编码的值。

Feed 上下文

    import React, { Component } from 'react'

    const FeedContext = React.createContext({
      Feed: [],
      user: '',
      error: null,
      setError: () => {},
      clearError: () => {},
      setFeed: () => {},
      setUser: () => {}
    })

     export default FeedContext

    export class FeedProvider extends Component {
      state = {
        feed: [],
        error: null,
        user: ''
      };

      setUser = user => {
        this.setState({ user })
      }

      setFeed = Feed => {
        this.setState({ Feed })
      }

      setError = error => {

        console.error()
        this.setState({ error })
      }

      clearError = () => {
        console.log('context is accessed')
        this.setState({ error: null })
      }

      render() {
        const value = {
          feed: this.state.feed,
          error: this.state.error,
          setError: this.setError,
          clearError: this.clearError,
          setFeed: this.setFeed,
          setUser: this.setUser
        }

        return (
          <FeedContext.Provider value={value}>
            {this.props.children}
          </FeedContext.Provider>
        )
      }
    }

AccountPanel.js

    import React from 'react';
    import FeedContext from "../../contexts/FeedContext";

    // functional component
    class AccountPanel extends React.Component {


    static contextType = FeedContext


    renderUserInfo(){
        const { user = [] } = this.context;

        //this returns "undefined"
        console.log(user.user)

        //this returns "user.setUser() is not a function"
        user.setUser('newUser')

        //this returns ' '
        this.context.setUser('y')
        console.log(user)
    }

    render(){
        return (
            <section>
                { this.renderUserInfo() }
               AccountPanel
            </section>
        )
       }

    }

    export default AccountPanel;

我希望能够通过 this.context.setUser('newUser) 更新上下文状态/用户，然后在我的导航栏组件中使用该值

Answer 1

文件 App.js

import React, { Component } from 'react';
import AccountPanel from "./components/AccountPanel";
import { FeedProvider } from './components/FeedContext';


class App extends Component {

  render() {
    return (
      <div className="App">
      <FeedProvider>
          <AccountPanel />
      </FeedProvider>
      </div>
    );
  }
}

export default App;

文件：FeedContext.js

import React, { Component } from 'react'

const FeedContext = React.createContext({
  Feed: [],
  user: '',
  error: null,
  setError: () => {},
  clearError: () => {},
  setFeed: () => {},
  setUser: () => {}
})

export default FeedContext

export class FeedProvider extends Component {

  constructor(props){
    super(props);
    this.state = {
      feed: [],
      error: null,
      user: "11"
    };
  }


  setUser = user => {
    console.log(`setting usr fns called for username: ${user}`);
    this.setState({ user });
  }

  setFeed = Feed => {
    this.setState({ Feed })
  }

  setError = error => {

    console.error()
    this.setState({ error })
  }

  clearError = () => {
    console.log('context is accessed')
    this.setState({ error: null })
  }

  componentDidMount(){
    console.log('FeedProvider:componentDidMount');
  }

  render() {
    let value1 = {

      Feed:this.state.feed,
      user:this.state.user,
      error:this.state.error,
      setError:this.setError,
      clearError:this.clearError,
      setFeed:this.setFeed,
      setUser:this.setUser
    }

    return (
      <FeedContext.Provider value={value1}>
        {this.props.children}
      </FeedContext.Provider>
    )
  }
}

文件：AccountPanel.js

import React from 'react';
import FeedContext from "./FeedContext";

    // functional component
    class AccountPanel extends React.Component {


    static contextType = FeedContext
    // return BlogPost component html/(JSX)

    componentDidMount(){
        console.log('AccountPanel:componentDidMount');
        console.log(this.context);
        const  value  = this.context;

        //this returns "undefined"
        console.log(value.user)

        //this returns "user.setUser() is not a function"
        console.log(value.setUser);
        value.setUser('newUser');
    }


    render(){
        const  value  = this.context;
        console.log(`Value of new User is : ${value.user}`);
        return (
            <section>
               AccountPanel
            </section>
        )
       }

    }

    export default AccountPanel;

希望这会有所帮助:)