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

我认为您正在更改数据模式。试试这个：

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

如果要保持数据架构的一致性，请尝试以下操作：

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

有关更多信息，请参阅https://medium.com/@oprearocks/what-do-the-three-dots-mean-in-javascript-bc5749439c9a