TypeError: undefined is not an object（評估 XYZ）

Question

我似乎無法擺脫這個錯誤，我不知道我做錯了什么。 我有一個顯示選定帖子的“顯示”屏幕。 屏幕頂部是發布用戶的個人資料圖片。

安裝組件后，將檢索 select 帖子的詳細信息並將其存儲在 state（“帖子”）中。 此帖子狀態包括用戶 object，其中包含有關發布帖子的用戶的信息 - 在某些情況下包括他們的個人資料圖片。

由於並非所有用戶都有頭像，我使用一個簡單的三元運算符來確定是否應該顯示頭像或圖標：

 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

如果帖子沒有完全加載，我嘗試返回加載組件； 更改三元運算符以檢查是否發布。 user.profile pic === 未定義； 使用 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": "test@gmail.com",
    "name": "test",
    "uid": "2qZfG0Wve6hmffdS0hL13qoIYp92",
  },
}

我究竟做錯了什么？ 謝謝。

Answer 1

找到有效的帖子后，您應該更新 state 帖子。

 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>

Answer 2

試試這個方法

<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>

Answer 3

use null check post.user && post.user.profilePic