React组件Props渲染异常及Firebase数据传递问题求助

Hey there! Let's break down your two React problems and fix them up step by step:

1. Why only one post gets passed to the BlogPost component? #

The core issue here is how you're updating state inside the forEach loop. setState is asynchronous in React—when you call it multiple times in a loop, each call doesn't wait for the previous state update to finish.

In your code, every time you run this.setState({ posts: [...this.state.posts, postData] }), you're using the stale, unupdated version of this.state.posts (which starts as an empty array). By the end of the loop, only the last post stays in state because all previous updates were based on that initial empty array.

Fix: Collect all posts first, then update state once #

Instead of updating state in each iteration, gather all your post data into a single array first, then call setState just once:

componentDidMount() {
  const db = firebase.firestore()
  db.collection('posts').get().then(snapshot => {
    // Gather all posts into an array first
    const postsArray = snapshot.docs.map(post => ({
      ...post.data(),
      id: post.id // Add the document ID directly in the object
    }))
    // Update state with the full array of posts
    this.setState({ posts: postsArray })
  })
}

2. Why aren't all props rendering in the child component? #

This is a direct side effect of the first issue—if your parent component's posts state only holds one item, the child component can only receive that single prop. Once you fix the state update logic above, all posts will be passed to the BlogPost components correctly.

Bonus: Fix the loading state check #

Right now, your loading check this.state.posts ? ... : <h1>loading</h1> won't work because an empty array [] is considered "truthy" in JavaScript. To properly show a loading state, add a dedicated loading state property:

state = { posts: [], loading: true }

componentDidMount() {
  const db = firebase.firestore()
  db.collection('posts').get()
    .then(snapshot => {
      const postsArray = snapshot.docs.map(post => ({
        ...post.data(),
        id: post.id
      }))
      this.setState({ posts: postsArray, loading: false })
    })
    // Don't forget to handle errors!
    .catch(err => {
      console.error('Error fetching posts:', err)
      this.setState({ loading: false })
    })
}

render() {
  if (this.state.loading) {
    return <h1>loading</h1>
  }
  return (
    <>
      {this.state.posts.map(post => <BlogPost post={post} key={post.id} /> )}
    </>
  );
}

内容的提问来源于stack exchange，提问作者ES Sinc