javascript - TypeError:无法读取未定义 React JS 的属性“用户名”
问题描述
我在解决这个错误时遇到了一些麻烦,我不知道从哪里开始。这是错误:
我也不明白箭头指向的第二个窗口<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
。
解决方案
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
推荐阅读
- android - 在 Kiosk 模式下禁用 Android 导航(Android 管理 API)
- dictionary - 颤动的谷歌地图:在两个位置之间绘制路线
- javascript - 响应保持返回状态码 403 而不是 200
- python - a * a//b 在 Python 中不能正常工作(// 运算符)
- android - 如何从 Newland MT90 读取多个条码?
- python - 如何在隐身模式下使用歌剧打开网址?
- c# - 使用 Linq 在视图中显示字段名称
- php - 添加“发件人”标头后PHP邮件功能不起作用
- python - Groupby 并对第一列和最后一列应用不同的功能
- r - 如何使用 RStudio 使用满足某些条件的 2 列创建新变量