Я могу получить доступ к объекту моего контекста, но не могу обновить любое из его значений

Question

Я пытаюсь использовать контекстный API React для управления глобальным состоянием.Однако я не могу понять, как обновить контекст, а затем получить обновленные значения контекста.

Я могу вернуть объект, содержащий весь контекст, когда я console.log (this.context), но console.log (this.context.user) возвращает "неопределенное".

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 {
      state = {
        feed: [],
        error: null,
        user: ''
      };

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

      setError = error => {

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

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

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

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

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

BlogFeed.js

    import React from 'react';
    import FeedContext from "../../contexts/FeedContext";
    import BlogPost from '../../Components/Container/BlogPost/BlogPost';
    import AccountPanel from '../../Components/AccountPanel/AccountPanel';
    import "./BlogFeed.css";
    import ArticleApiService from "../../services/article-api-service";
    import { Link } from "react-router-dom";

    class BlogFeed extends React.Component {

      static contextType = FeedContext;

      state = {
        feed: [],
      }

      componentDidMount() {
        this.context.clearError()
        ArticleApiService.getPosts()

Этот код берет выходные данные из ArticleApiService.getPosts () выше и использует его для успешного обновления значения фида.локального состояния

      // .then((data) => {
      //   this.setState({ feed: data })
      //   return data
      // })

Предполагается, что этот код получает тот же вывод из ArticleApiService.getPosts (), использует его для обновления FeedContext «feed», в настоящее время он не обновляет FeedContext

          .then(this.context.setFeed)
          .catch(this.context.setError)
      }

      renderPosts() {
        const { feed = [] } = this.context

         return function(){

        }
      }

feed будет равен значению this.context.feed, если он был успешно обновлен ранее, но не обновляется.Значение канала будет отображаться так, чтобы оно могло отображать содержимое каждого сообщения

       renderPosts() {
        const { feed = [] } = this.context
        return feed.map(post =>
          <BlogPost
            key={post.id}
            post={post}
          />
        )
      }

      render() {

        let feed = this.state.feed;

         const { error } = this.context

        return (
          <section className="feed-container">
            <div className="feed-grid">
              <div className="spacerLeft"></div>
              <div className="feed-grid-item">
                <h1>Blog Feed</h1>

Этот код должен отображать ошибку, если значение "error" было обновлено в контексте, чтоэто не имеет.В качестве альтернативы, канал используется для других, мы получаем сообщения блога, отображаемые в нашем канале, потому что локальное состояние успешно обновлено выше, но если я использую this.renderPosts (), ничего не отображается, потому что FeedContext никогда не обновляется.

                 {error

                  ?<p>No Posts have been created, but the good news is that 
                       you can create one 
                    <Link
                    onClick={this.handleLogoutClick}
                    to='/create_post'>
                    here
                 </Link></p>
                  // this.state.feed.length
                  // ? feed.map(post => { return <BlogPost postData={post}> 
                    </BlogPost> })
                  : ?this.renderPosts()
                    }


              </div>
              <div className="spacerRight">

                <div className="side-panels flexed">
                  {/* Future Account Panel Component */}
                  <AccountPanel className="side-panel-content"></AccountPanel>
                </div>

                <div className="side-panels flexed">
                  {/* Future Account Panel Component */}
                  <div className="side-panel-content">Categories</div>
                </div>

              </div>
            </div>
          </section>
        );
      }
    }

    export default BlogFeed;

В конечном счете, я хотел бы иметь возможность обновлять контекст канала и получать из него обновленные значения

Answer 1

  state = {
    feed: [],
    error: null,
    user: ''
  };

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

таким образом, у вас будет this.state.feed и this.state.Feed - feed не равно Feed - создайте одинаковые имена, они чувствительны к регистру

Далее:

.then(this.context.setFeed)

это не похоже на вызов функции, данные не передаются