Comments (7)
@mauvpark YOU ARE A HERO!!!!!!!!
from project_mern_memories.
part 3,4,5 updated.
from project_mern_memories.
@Mauv-hub I'm having issues with my posts showing up. In my Posts.js
page. I am able to console.log the data put nothing is showing up on my screen. I have the following code
import { useState, useEffect } from "react";
import { fetchPosts } from "../../api/posts";
import { Grid } from "@material-ui/core";
import { useSelector } from "react-redux";
import Post from "./Post/post.js";
import { useStyles } from "./Post/styles";
import styles from "../Posts/Posts.module.css";
export default function Posts() {
const [postsData, setPostsData] = useState([]);
const posts = useSelector(state => state.posts);
const classes = useStyles();
useEffect(() => {
const getData = async () => {
const response = await fetchPosts();
const data = response.data;
console.log(data);
setPostsData(data);
};
getData();
}, []);
return (
<div className={styles.grid}>
{posts.map(post => (
<div>
<Post key={post._id} post={post} />
</div>
))}
</div>
);
}
from project_mern_memories.
@fkhan698 Hello, getting posts from api has following work flow.
client
- Call getPosts(actions/posts) and dispatch it to redux using redux-thunk in Home.js
- getPosts(actions/posts) calls api request
- fetchPosts(api/index.js but you are api/posts check out your module path) calls server "Get posts from server."
server
- router(server/routes/posts.js) calls getPosts from controllers.
- getPosts(server/controllers/posts.js) calls posts from mongo DB, then return response. (Success: posts, Fail: error)
back to client
- asynchronous getPosts(actions/posts.js) gets response from server(what you are looking for "data") and send it to redux storage.
- redux updates posts, send updated posts to Posts component(components/Posts/Posts.js).
- Posts Component updates posts and show those.
You should check where is wrong if you don't get any response error( you should return something in server side using res.status ... something) it would probably occur in API side or would be your reference error.
I suggest to use eslint for checking it.
Good luck!
from project_mern_memories.
I am using port 8080 of my server due to the error: the 5000 is already in use, I tried many ways, but I failed.
All stuff work for me except the warning: src/reducers/posts.js
Line 3:1: Assign arrow function to a variable before exporting as module default
Until I stuck at the last section of Video 1: create a post.
I keep getting the error: POST http://localhost:8080/posts 404 (Not Found)
I am a newbie not familiar with the full stack. Thanks in advance if anyone one can help:)
from project_mern_memories.
@mozyao Hello, you can kill port npx kill-port 5000
. Could you show me your code where exactly problem happens? If you got 404 error, you should check out your data flow. I suggest to use console.log for debugging for that. For example, you could check your req.body
before create post to the mongo DB. If req.body
has right value, then check your newPostMessage
comes from PostMessage
. You will find some error during giving arguments.
from project_mern_memories.
@mozyao can you elaborate? I still got 404 error :((
from project_mern_memories.
Related Issues (20)
- suggestion HOT 1
- Having issues loading the posts on creating them? (Circular loader stuck)
- Don't know how to run code on localhost:5000/posts HOT 3
- TypeError: func.apply is not a function, when ever I navigate back from any particular post to home page it shows this error and it doesn't actually shows where it is occurring, HOT 1
- List best open source built with mern
- While submitting new Post HOT 1
- server running on portnumber 5000 is not showing HOT 1
- POST http://localhost:5000/user/signin 404 (Not Found)
- likeCount dispatch hook not working HOT 2
- i want to upload one parent folder that folder contain two child folder but when i want to push that folder in that only one child folder is upload second folder is not upload why? HOT 1
- Cross-Origin-Opener-Privacy Policy block the window.closed cell HOT 1
- npm ERR! Could not resolve dependency: peer react@"^16.8.0 || ^17.0.0" from @material-ui/[email protected] HOT 1
- Part 1: Create a Post ... Redux createStore issue! HOT 4
- Can someone please help me with this error message HOT 4
- @material/core issue
- Part 2: TypeError: PostMessage.findByIdAndRemove is not a function HOT 1
- adding PDF
- mongoDB cluster can not connect error
- It seems like there's an error with module resolution in your Node.js application. Specifically, it's unable to find the module posts.js within the routes directory
- Clear button is not working for the choose file input. HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from project_mern_memories.