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

【问题标题】：TypeError: Cannot read property 'username' of undefined React JSTypeError：无法读取未定义 React JS 的属性“用户名”
【发布时间】：2020-07-15 19:56:05
【问题描述】：

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

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

这些是sn-ps的代码：

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。

【问题讨论】：

您的代码看起来不错，但问题很可能来自doc 本身。所以你可能不得不尝试复制数据而不是{ id: doc.id, post: { ...doc.data() } }
也不起作用:(
如果不走运，您可能必须自己公开一个模型，例如：{ username: doc.data().username, ... } 或者甚至使用 new Model(doc.data()) 类，然后在您的构造中覆盖东西

标签： javascript reactjs firebase firebase-realtime-database

【解决方案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 
  }))); 
 })

【讨论】：

遇到同样的错误？如果是，请你做地图：console.log(snapshot.docs) 看看你得到了什么
我将我的代码更改为您的代码并添加了 console.log(snapshot.docs) 但我仍然收到相同的错误，除了相同的错误之外没有其他任何东西
我要求您这样做，以便您可以检查控制台以查看数据架构。检查一下，让我知道你得到了什么。