scorpionsx
Hectopat
- Katılım
- 20 Mayıs 2022
- Mesajlar
- 96
Daha fazla
- Cinsiyet
- Kadın
React ile bir web uygulaması yazıyorum ama bu hatayı aldım. Neyi gözden kaçırıyorum anlamadım. Kodları ekledim.
JavaScript:
import { useEffect, useState } from "react";
import Post from "../post/Post";
import Share from "../share/Share";
import "./feed.css";
import axios from "axios";
export default function Feed() {
const [posts, setPosts] = useState([]);
useEffect(() => {
const fetchPosts = async () => {
const res = await axios.get("posts/timeline/6639f636d663303ec4b65925");
setPosts(res.data);
};
fetchPosts();
}, []);
return (
<div className="feed">
<div className="feedWrapper">
<Share />
{posts.map((p) => (
<Post key={p.id} post={p} />
))}
</div>
</div>
);
}
Kod:
import "./post.css";
import { MoreVert } from "@mui/icons-material";
import axios from "axios";
import { useEffect, useState } from "react";
export default function Post({ post }) {
const [like, setLike] = useState(post.like);
const [isLiked, setIsLiked] = useState(false);
const [user, setUser] = useState({});
const PF = process.env.REACT_APP_PUBLIC_FOLDER;
useEffect(() => {
const fetchUser = async () => {
const res = await axios.get(`users/${post.userId}`);
setUser(res.data);
};
fetchUser();
}, []);
const likeHandler = () => {
setLike(isLiked ? like - 1 : like + 1);
setIsLiked(!isLiked);
};
return (
<div className="post">
<div className="postWrapper">
<div className="postTop">
<div className="postTopLeft">
<img
className="postProfileImg"
src={user.profilePicture || PF + "person/noAvatar.png"}
alt=""
/>
<span className="postUsername">{user.username}</span>
<span className="postDate">{post.date}</span>
</div>
<div className="postTopRight">
<MoreVert />
</div>
</div>
<div className="postCenter">
<span className="postText">{post?.desc}</span>
<img src={PF + post.photo} alt="" className="postImg" />
</div>
<div className="postBottom">
<div className="postBottomLeft">
<img
className="likeIcon"
src={`${PF}like.png`}
onClick={likeHandler}
alt=""
/>
<img
className="likeIcon"
src={`${PF}heart.png`}
onClick={likeHandler}
alt=""
/>
<span className="postLikeCounter">{like} people like it</span>
</div>
<div className="postBottomRight">
<span className="postCommentText">{post.comment} comments</span>
</div>
</div>
</div>
</div>
);
}
Son düzenleyen: Moderatör:
