Почему я не могу получить доступ к методам или свойствам контекста

Question

Я пытаюсь использовать контекстный API React для управления глобальным состоянием.Когда я пытаюсь вызвать контекстные методы или получить доступ к контекстным свойствам, я получаю сообщения об ошибках: «this.context.setUser функция не существует» или «undefined».

Однако я смог жестко закодировать значения в состояниеконтекста и получить жестко закодированное значение.

Контекст контекста

    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), затем используйте это значение в моем компоненте navbar

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;

Надеюсь, это поможет:)