Estoy tratando de usar el estado de los usuarios para mostrarlos en la página de publicaciones, pero no muestra nada, aparece el error "renderizar no es una función". Cualquier ayuda es muy apreciada. Este es mi frente
Este es mi código:
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;
El componente Consumer de un contexto está diseñado para usarse en componentes de clase porque no podemos usar el gancho useContext en un componente de clase. Por lo tanto, podría eliminar el Consumidor mientras usa el gancho useContext .
Deberá envolver su componente PostList con los proveedores de contexto en algún lugar del padre como se muestra a continuación:
function App() {
return (
<UserContext.Provider value={someValue}>
<PostsContext.Provider value={someValue}>
<PostList />
</PostsContext.Provider>
</UserContext.Provider>
);
}
Entonces, puedes usar el contexto como el siguiente:
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>
);
}