代码之家 › 专栏 › 技术社区 › adjash

.map仅返回数组的最后一个元素

array-map reactjs arrays javascript

adjash · 技术社区 · 3 年前

我正在用CloudFireStore创建一个博客类型的应用程序,只是为了学习一些东西。但是,我遇到了一个问题,即在.map方法中只返回状态数组的最后一个元素“blogs”。

非常感谢您的帮助,谢谢!

const [blogs, setBlog] = useState([]);
const fetchBlogs = async () => {
    const response = await getDocs(collection(db, "blog posts"));
    let postArray = [];
    response.docs.forEach((blogpost) => {
        postArray.push(blogpost.data());
    });
    console.log(postArray)
    postArray.forEach(post => {
        setBlog([...blogs, post]);
    });
}
useEffect(() => {
    fetchBlogs();
}, []);

return (
    <ul className="posts-container">
       { blogs.map((blog) => { 
           console.log(blog); //this outputs each of the individual posts, but only the last is displayed as an <li>
           return ( <li key={blog.title}>{blog.title}</li> )
        })}
    </ul>
)

1 回复 | 直到 3 年前

Maksym Shcherban 3 年前

与此相反:

postArray.forEach(post => {
  setBlog([...blogs, post]);
});

尝试这样做:

setBlog(postArray);

Abraham 3 年前

const fetchBlogs = async () => {
    const response = await getDocs(collection(db, "blog posts"));
    setBlog([...blogs, ...response.docs.map(blogpost => blogpost.data())])
}

useEffect(() => fetchBlogs(), []);

axtck 3 年前

您可能希望将响应置于您的状态,而不执行 forEach()

setBlog(postArray);

甚至(取决于数据结构)

const [blogs, setBlog] = useState([]);

const fetchBlogs = async () => {
    const response = await getDocs(collection(db, "blog posts"));
    setBlog(response.data); // set to whatever you need
}

useEffect(() => {
    fetchBlogs();
}, []);

return (
    <ul className="posts-container">
       { blogs.map((blog) => { 
            return <li>( <li key={blog.title}>{blog.title}</li> )
          }
       )}
    </ul>
);