Question

我似乎无法摆脱这个错误，我不知道我做错了什么。我有一个显示所选帖子的“显示”屏幕。屏幕顶部是发布用户的个人资料图片。

当组件被挂载时，选择帖子的细节被检索并存储在一个状态（“帖子”）中。此帖子状态包括一个用户对象，其中包含有关发布帖子的用户的信息 - 在某些情况下，包括他们的个人资料图片。

由于并非所有用户都有头像，我使用一个简单的三元运算符来确定应该显示头像还是图标：

 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

当您找到有效的帖子时，您应该更新帖子状态。

 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

类型错误：未定义不是对象（评估 XYZ）

3 个答案: