在反应中使用上下文但它们没有加载。 我收到 TypeError: render is not a function

Question

I am trying to use the state of users to display them in the posts page, but it does not render anything, I get an error "render is not a function". Any help is highly appreciated. This is my front end

This is my code:

function PostsList(props) {
 
    let { deletePosts } = useContext(PostsContext);

    let users = useContext(UserContext);

    let formatDate=(input)=>{
        let v=new Date(input);
        return v.toLocaleDateString("en-US")
    }

    return (
        <PostsContext.Consumer value={users}>
            <UserContext.Consumer>
         {
            ({ posts }) => {
                return <div>
                    <h3>welcome back,  {users.name}</h3>
                    <a href="/posts/new"><button>Add New Post</button></a>
                    <div>
                        {posts.map((c) => {
                            console.log(posts)
                            return (
                                <div className='posts_list'>
                                <div key={c._id}>
                                </div>
                                <div className='posts_text'>
                                    <h2>{c.name}</h2>
                                </div>
                                    <div className='list'>
                                    <Link to={`/edit/${c._id}`}>
                                    <button>Edit</button>
                                    </Link>
                                    <button onClick={() => { deletePosts(c._id)}}>Delete</button>
                                    <p>Tweet created on: {formatDate(c.createdAt)}</p>
                                    </div>
                                </div>
                            )
                        })}
                    </div>
                </div>

            }
        }
        </UserContext.Consumer>
        </PostsContext.Consumer>
    );
}

export default PostsList;

Answer 1

The Consumer component of a context is intended to be used in class components because we cannot use the useContext hook in a class component. So, you could remove the Consumer as you are using the useContext hook.

You will have to wrap your PostList component with the context providers somewhere in the parent like the following:

function App() {
  return (
    <UserContext.Provider value={someValue}>
      <PostsContext.Provider value={someValue}>
        <PostList />
      </PostsContext.Provider>
    </UserContext.Provider>
  );
}

Then, you can use the context like the following:

function PostList() {
  const users = useContext(UserContext);

  // I am assuming you get posts from "PostsContext" itself
  const { deletePosts, posts } = useContext(PostsContext);

  const formatDate = (input) => new Date(input).toLocaleDateString("en-US")

  return (
    <div>
      <h3>welcome back,  {users.name}</h3>
      <a href="/posts/new"><button>Add New Post</button></a>
      <div>
        {posts.map((c) => {
          console.log(posts)
          return (
            <div className='posts_list'>
              <div key={c._id}></div>
              <div className='posts_text'>
                <h2>{c.name}</h2>
              </div>
              <div className='list'>
                <Link to={`/edit/${c._id}`}>
                  <button>Edit</button>
                </Link>
                <button onClick={() => { deletePosts(c._id)}}>
                  Delete
                </button>
                <p>
                  Tweet created on: {formatDate(c.createdAt)}
                </p>
              </div>
            </div>
          )
        })}
      </div>
    </div>
  );
}