javascript - TypeError：无法读取未定义 React JS 的属性“用户名”

Question

我在解决这个错误时遇到了一些麻烦，我不知道从哪里开始。这是错误：

我也不明白箭头指向的第二个窗口<Button。

这些是代码片段：

const[username, setUsername] = useState('');

<form className="app__register__login">
        <Input
          placeholder="username"
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
/>

{
    posts.map(({id, post}) => (
      <Post key={id} username={post.username} caption={post.caption} imageUrl={post.imageUrl}/>
    ))
}

当我编写以下代码时：

db.collection('posts').onSnapshot(snapshot => {
  setPosts(snapshot.docs.map(doc => doc.data()));
})

{
    posts.map(post) => (
      <Post username={post.username} caption={post.caption} imageUrl={post.imageUrl}/>
    ))
}

我没有收到任何错误消息。当我将其更改为：

db.collection('posts').onSnapshot(snapshot => {
  setPosts(snapshot.docs.map(doc => ({
    id: doc.id,
    post: doc.data(),
  }))); 
})

{
    posts.map(({id, post}) => (
      <Post key={id} username={post.username} caption={post.caption} imageUrl={post.imageUrl}/>
    ))
}

我明白了TypeError。

Answer 1

In my opinion, you are changing the data schema. Try this:

{
posts.map(({id, post}) => (
  <Post key={id} username={post.username} caption={post.post.caption} imageUrl={post.post.imageUrl}/>
))}

If you want to keep the consistency of your data schema, try this:

db.collection('posts').onSnapshot(snapshot => {
   setPosts(snapshot.docs.map(doc => ({    
        ...doc.data(),
           id: doc.id 
  }))); 
 })

For more info, please refer to https://medium.com/@oprearocks/what-do-the-three-dots-mean-in-javascript-bc5749439c9a