如何通过 Flatlist 传递与渲染无关的数据？

Question

我创建的 Flatlist 如下。

export default function Comments({ route }) {
  const renderComment = ({ item: comments }) => {
    return <CommentRow {...comments} />;
  };
  return (
    <Container>
      <CommentBox>
        <FlatList
          keyboardDismissMode={true}
          showsVerticalScrollIndicator={false}
          data={route.params.comments}
          keyExtractor={(comment) => "" + comment.id}
          renderItem={renderComment}
        />
      </CommentBox>
    </Container>
  );
}

渲染后的数据集如下所示：

Object {
  "key": "Comments-uxnCZKk0KvTmpppxkM8IF",
  "name": "Comments",
  "params": Object {
    "comments": Array [
      Object {
        "__typename": "Comment",
        "createdAt": "1642680008811",
        "id": 1,
        "isMine": false,
        "payload": "등산 너무 좋았겠네~~",
        "user": Object {
          "__typename": "User",
          "avatar": "https://chungchunonuploads.s3.ap-northeast-2.amazonaws.com/avatars/4-1642681358399-%E1%84%80%E1%85%B5%E1%86%B7%E1%84%8C%E1%85%A5%E1%86%BC%E1%84%92%E1%85%A9.png",
          "username": "김정호",
        },
      },
      Object {
        "__typename": "Comment",
        "createdAt": "1642680037676",
        "id": 3,
        "isMine": false,
        "payload": "다음주에 그 산으로 가자 우리도~~",
        "user": Object {
          "__typename": "User",
          "avatar": "https://chungchunonuploads.s3.ap-northeast-2.amazonaws.com/avatars/4-1642681358399-%E1%84%80%E1%85%B5%E1%86%B7%E1%84%8C%E1%85%A5%E1%86%BC%E1%84%92%E1%85%A9.png",
          "username": "김정호",
        },
      },
    ],
    "photoId": 1,
  },
  "path": undefined,
}

所以成功了。我return用这个数据集<CommentRow>筛选。

但是我需要传递另一个数据photoId。此 photoId 存在于此屏幕中，但不存在于 CommentRow 屏幕中。

而评论数据集没有这个photoId信息。所以我需要单独将它与 {...comments} 数据一起发送到 CommentRow Screen。但是如何通过 Flatlist 发送它？

我试图制作另一个对象，将评论对象与 photoId 结合起来。但它失败了:(

或者我是否应该只在 CommentRow 屏幕中显示 photoId 信息而不是通过 Flatlist？

如果您需要更多关于我的代码的解释，我可以实时回答。

请帮帮我

CommentRow 屏幕。 PhotoId 用于 cache.modify 部分，因为它需要更新我的缓存。

export default function CommentRow({
  id,
  user,
  payload,
  isMine,
  createdAt,
  updatedAt,
  commentNumber,
}) {
  const navigation = useNavigation();
  const createdDate = new Date(+createdAt);
  const date = createdDate.toISOString().substring(0, 10);
  const updateDeleteComment = (cache, result) => {
    const {
      data: {
        deleteComment: { ok, error },
      },
    } = result;
    if (ok) {
      cache.evict({ id: `Comment:${id}` });
      cache.modify({
        id: `Photo:${photoId}`,
        fields: {
          comments(prev) {
            return [...prev, newCacheComment];
          },
          comments(prev) {
            return prev +1;
          }
        }
      })
    }
  };

  const [deleteCommentMutation] = useMutation(DELETE_COMMENT_MUTATION, {
    variables: {
      id,
    },
    update: updateDeleteComment,
  });
  const onDeleteClick = () => {
    deleteCommentMutation();
  };
  return (
    <Container>
      <CommentContainer>
        <UserImage source={{ uri: user.avatar }} />
        <TextBox>
          <Header>
            <Username>{user.username}</Username>
            <CreatedTime>{date}</CreatedTime>
          </Header>
          <CommentText>{payload}</CommentText>
        </TextBox>
      </CommentContainer>
      {isMine ? (
        <WriteContainer>
          <TouchableOpacity>
            <WriteComment>수정</WriteComment>
          </TouchableOpacity>
          <TouchableOpacity onPress={onDeleteClick}>
            <WriteComment>삭제</WriteComment>
          </TouchableOpacity>
        </WriteContainer>
      ) : null}
    </Container>
  );
}

Answer 1

将 renderComment 更改为

const renderComment = ({ item: comments }) => {
     const photoIdobj = { photoId: `${route.params.photoId}` };
     const passedComments = { ...comments, ...photoIdobj };
    return <CommentRow {...passedComments} />;
  };

并像

一样从 CommentRow 调用 photoId

export default function CommentRow({
  id,
  user,
  payload,
  isMine,
  createdAt,
  updatedAt,
  commentNumber,
  photoId
})

Answer 2

我从@Thanhal 的回答中得到了灵感。我将新对象组合为 comments 和 photoId，如下所示。然后就可以了。

  const renderComment = ({ item: comments }) => {
    const photoIdobj = { photoId: `${route.params.photoId}` };
    const passedComments = { ...comments, ...photoIdobj };
    return <CommentRow {...passedComments} />;
  };
  return (

如何通过 Flatlist 传递与渲染无关的数据？

How to pass data which is not relevant to render through Flatlist?

react-native

flatlist