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

Question

I cannot seem to shake this error and I don't know what I'm doing wrong. I have a 'show' screen displaying a selected post. At the top of the screen is a profile picture for the user that posted.

When the component is mounted, details of the select post are retrieved and stored in a state ("post"). This post-state includes a user object which contains information about the user that made the post - including, in some cases, their profile picture.

As not all users have profile pictures, I use a simple ternary operator to determine whether a profile picture or an icon should be displayed:

 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>

Quite straightforward and this same code works fine in other components, but in this one, it keeps crashing:

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

I have tried returning a loading component if the post hasn't fully loaded; change the ternary operator to check if post. user.profile pic === undefined; using type and hasOwnProperty methods.

Here is the 'post' as 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",
  },
}

What am I doing wrong? Thanks.

Answer 1

You should update post state when you have found the valid one.

 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

Try this way

<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