如何通過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-김정호.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-김정호.png",
          "username": "???",
        },
      },
    ],
    "photoId": 1,
  },
  "path": undefined,
}

所以它成功地作業了。我<CommentRow>用這個資料集將它回傳到螢屏。

但我需要傳遞另一個資料，即photoId. 此 photoId 存在于此螢屏中，但不存在于 CommentRow 螢屏中。

并且評論資料集沒有這個 photoId 資訊。所以我需要將它單獨發送到帶有 {...comments} 資料的 CommentRow 螢屏。但是如何通過 Flatlist 發送它？

我試圖制作另一個物件作為將評論物件與 photoId 組合。但它失敗了:(

或者我是否應該在 CommentRow 螢屏中將 photoId 資訊作為不通過 Flatlist 的方式？

如果您需要有關我的代碼的更多解釋，我可以實時回答。

請幫我。

評論行螢屏。 部分使用 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>
  );
}

uj5u.com熱心網友回復：

將 renderComment 更改為

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

并從 CommentRow 中呼叫 photoId，例如

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

uj5u.com熱心網友回復：

我從@Thanhal 的回答中得到了一個想法。我將新物件設定為組合comments，photoId如下所示。然后它作業。

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

標籤：

上一篇：如何使用sql中的分析功能獲取每天登錄網站的新唯一IP地址的計數？

下一篇：錯誤：`FileSystem.moveAsync`需要一個`to`路徑。在本機反應（世博會）