我正在創建一個類似 sns 的 Web 應用程式。作為其中一項功能，我正在嘗試顯示用戶發布的所有帖子。但是，我的代碼沒有顯示任何內容，并且在控制臺上顯示“未捕獲的 TypeError：posts.map 不是函式”的錯誤。我完全是 Javascript、react 和 firebase 的初學者。任何人都可以查看我的代碼嗎？謝謝你。
import React, { useState, useEffect } from 'react';
import "./Post.css";
import Posts from "./Posts.js";
import { getFirestore } from "firebase/firestore";
import { collection, doc, onSnapshot } from "firebase/firestore";
import { useNavigate } from "react-router-dom";
import ImageUpload from "./ImageUpload.js";
function Post( {user} ) {
const db = getFirestore();
const navigate = useNavigate("");
const [posts, setPosts] = useState('');
const colRef = collection(db, 'posts');
useEffect(()=>
onSnapshot(colRef,(snapshot) => {
setPosts(
snapshot.docs.map((doc) => {
return{
post: doc.data(),
id: doc.id
};
})
);
}),
[]);
return (
<div className = "post">
<ImageUpload username = {user?.displayName} />
{
posts.map(({id, post}) => (
<Posts key = {id}
postId = {id}
origuser = {user?.displayName}
username = {post.username}
userId = {user.uid}
caption = {post.caption}
imageUrl = {post.imageUrl}
noLikes = {post.noLikes}
/>
))
}
</div>
)
}
export default Post
uj5u.com熱心網友回復：
第一步是初始化posts為一個陣列，目前你將它作為一個string并且在字串原型中沒有.map函式。
const [posts, setPosts] = useState([]);
之后，您需要確保在setPosts呼叫中您還傳遞了一個陣列。通過查看示例，它似乎已經是snapshot.docs.map。
uj5u.com熱心網友回復：
嘗試這個 ：
{
posts && posts.map(({id, post}) => (
<Posts key = {id}
postId = {id}
origuser = {user?.displayName}
username = {post.username}
userId = {user.uid}
caption = {post.caption}
imageUrl = {post.imageUrl}
noLikes = {post.noLikes}
/>
))
}
uj5u.com熱心網友回復：
將您的狀態定義為陣列
const [posts, setPosts] = useState([]);
然后在 map 方法上添加額外的驗證層
{
posts && posts.length > 0 && posts.map(({id, post}) => (
<Posts key = {id}
postId = {id}
origuser = {user?.displayName}
username = {post.username}
userId = {user.uid}
caption = {post.caption}
imageUrl = {post.imageUrl}
noLikes = {post.noLikes}
/>
))
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/488072.html
標籤：javascript 反应 火力基地