TypeError:undefined 不是对象(评估 XYZ)
2021-03-10
223
我似乎无法摆脱这个错误,我不知道我做错了什么。我有一个“显示”屏幕,显示选定的帖子。屏幕顶部是发帖用户的个人资料图片。
安装组件时,将检索所选帖子的详细信息并将其存储在状态(“帖子”)中。此帖子状态包括一个用户对象,其中包含有关发帖用户的信息 - 在某些情况下包括他们的个人资料图片。
由于并非所有用户都有个人资料图片,我使用一个简单的三元运算符来确定是否应显示个人资料图片或图标:
const [post, setPost] = useState({})
useEffect(() => {
const post = feed.find(el => el.id === props.route.params.postId)
setPost(post)
}, [feed])
return <>
<ListItem>
{ post.user.profilePic
? <Avatar source={{ uri: post.user.profilePic }} size="medium" rounded />
: <Avatar rounded icon={{ name: 'person', type: "ionicons" }} size="medium" rounded overlayContainerStyle={{ backgroundColor: 'grey' }} />}
<ListItem.Content>
<ListItem.Title style={{ fontWeight: "bold" }}>{"@" + post.user.userName}</ListItem.Title>
</ListItem.Content>
</ListItem>
非常简单,同样的代码在其他组件中运行良好,但在这个组件中,它一直崩溃:
TypeError: undefined is not an object (evaluating 'post.user.profilePic')
This error is located at:
in ShowScreen (at SceneView.tsx:122)
in StaticContainer
in StaticContainer (at
etc
如果帖子尚未完全加载,我尝试返回一个加载组件;更改三元运算符以检查 post.user.profile pic === undefined;使用 type 和 hasOwnProperty 方法。
以下是 console.logged 中的“帖子”:
Object {
"caption": "Testing caption
",
"comments": Array [
Object {
"authorId": "vqEzix1k4tQer7wmMG32Fby4KKg1",
"authorName": "sarah123",
"comment": "Comments test",
"created": t {
"nanoseconds": 119000000,
"seconds": 1614335984,
},
"id": "sYCm2nk0XpDKYiBQ6fmy",
},
Object {
"authorId": "vqEzix1k4tQer7wmMG32Fby4KKg1",
"authorName": "rob123",
"comment": "Testing comments works!",
"created": t {
"nanoseconds": 362000000,
"seconds": 1614331033,
},
"id": "srd6faF3uw2AvQbWskzd",
},
],
"creation": t {
"nanoseconds": 144000000,
"seconds": 1612301025,
},
"currentUserLike": false,
"downloadUrl": "https://firebasestorage.googleapis.com/v0/b/rn-instagram-clone-88f85.appspot.com/o/post%2F2qZfG0Wve6hmffdS0hL13qoIYp92%2F0.xgqi91loct?alt=media&token=ac9bc56f-d04b-46f2-acc6-45f8475134ab",
"id": "PiFmGtUb55OMGUiIQO61",
"location": "Bangor",
"user": Object {
"email": "[email protected]",
"name": "test",
"uid": "2qZfG0Wve6hmffdS0hL13qoIYp92",
},
}
我做错了什么?谢谢。
3个回答
找到有效的帖子后,您应该更新帖子状态。
const [post, setPost] = useState({})
useEffect(() => {
const post = feed.find(el => el.id === props.route.params.postId)
if (post) {
setPost (post)
}
}, [feed])
return <>
<ListItem>
{ post.user.profilePic
? <Avatar source={{ uri: post.user.profilePic }} size="medium" rounded />
: <Avatar rounded icon={{ name: 'person', type: "ionicons" }} size="medium" rounded overlayContainerStyle={{ backgroundColor: 'grey' }} />}
<ListItem.Content>
<ListItem.Title style={{ fontWeight: "bold" }}>{"@" + post.user.userName}</ListItem.Title>
</ListItem.Content>
</ListItem>
Diwakar Singh
2021-03-10
试试这个方法
<ListItem>
{post && post.user && post.user.profilePic ? (
<Avatar source={{ uri: post.user.profilePic }} size="medium" rounded />
) : (
<Avatar
rounded
icon={{ name: "person", type: "ionicons" }}
size="medium"
rounded
overlayContainerStyle={{ backgroundColor: "grey" }}
/>
)}
<ListItem.Content>
<ListItem.Title style={{ fontWeight: "bold" }}>
{post && post.user && post.user.userName ? "@" + post.user.userName :""}
</ListItem.Title>
</ListItem.Content>
</ListItem>
Surya
2021-03-10
use null check post.user && post.user.profilePic
user10384449
2021-03-10