Javascript 在我当前的Gmail API项目中无限滚动Gmail消息

好的，所以我分享的代码是硬编码为20封电子邮件而已。我想得到电子邮件列表，直到它结束，而不仅仅是20封。所以当我滚动时，我将能够看到下一页。我知道gmail API有一个名为pagetoken的属性，但不知何故我无法实现它

我正在使用React钩子更新消息。我能够成功地看到20封电子邮件，但我想看到他们直到最后。下面是代码的前端

   {isEmpty(messages) ? (
        <Box mt={6} display='flex' align='center' justifyContent='center'>
          <Spinner
            thickness='4px'
            speed='0.65s'
            emptyColor='gray.200'
            color='blue.500'
            size='xl'
          />
        </Box>
      ) : (
        <Box overflowY='auto'>
          {messages.map((message) => {
            const name = removeQuote(
              getHeader(message.payload.headers, "From").split("<")[0]
            );
            const subject = getHeader(message.payload.headers, "Subject");
            const msg = decodeHtml(message.snippet.substr(0, 75));
            const backgroundColor =
              message.labelIds.indexOf("UNREAD") > -1 ? "#fff" : "#E2E8F0";

            return (
              <Flex
                key={message.id}
                id={message.id}
                onClick={handleMessageClick}
                wrap='no-wrap'
                justify='space-around'
                py={2}
                bg={backgroundColor}
                borderTop='1px'
                borderBottom='1px'
                borderColor='gray.300'
                cursor='pointer'
              >
                <Avatar name={name} src='' />
                <Box w='80%'>
                  <Text fontSize='sm' color='gray.700' isTruncated>
                    {name}
                  </Text>
                  <Text
                    fontSize='md'
                    fontWeight='bold'
                    color='#3182ce'
                    isTruncated
                  >
                    {subject}
                  </Text>
                  <Text fontSize='xs' color='gray.500'>
                    {msg}
                  </Text>
                </Box>
              </Flex>
            );
          })}
        </Box>
      )}
    </Flex>

---

根据文档，下一个getoken包含在响应中

您可以这样做：

let nextPageToken; // add me

const getMessages = (labelIds = "INBOX") => {
    // Get List of 20 message's Id
    const request = window.gapi.client.gmail.users.messages.list({
      userId: "me",
      labelIds: labelIds,
      maxResults: 20,
      pageToken: nextPageToken,  // changed
    });
...rest of function
};

const getMessagesData = (response) => {
  nextPageToken = response.nextPageToken;  // add me
  
  const messages = response.result.messages ? response.result.messages : [];
  
  messages.forEach((message) => {
...rest of function
}

发件人：

---

现在应该可以工作了，我在请求对象上有错误的属性。更改为{pageToken:NextPageGetOken…}嘿，我按照你的建议更改了代码，但当我向下滚动到最后时，它不会加载新消息。即使我能够获得下一页标记，我如何能够使用此标记重新请求。我必须在前端做些什么样的改变。感谢您的帮助。每次调用

getMessages

函数时，您都应该会看到下一页，只要在收到响应并且更新了

nextpGetOken

之后调用。在第一次

getMessages

调用中，它是未定义的，因此您将接收第一个页面，但它将使用下一个页面的令牌为所有后续调用定义。至于“无限”部分，您将希望使用滚动事件。这将有助于：

const getMessages = (labelIds = "INBOX") => {
    // Get List of 20 message's Id
    const request = window.gapi.client.gmail.users.messages.list({
      userId: "me",
      labelIds: labelIds,
      maxResults: 20,
    });

    setMessages([]);

    // Send Id list to getMessagesData to get Message Data foreach Id
    request.execute(getMessagesData);
  };

  const getMessagesData = (response) => {
    const messages = response.result.messages ? response.result.messages : [];

    messages.forEach((message) => {
      window.gapi.client.gmail.users.messages
        .get({
          userId: "me",
          id: message.id,
        })
        .then(
          (response) => {
           
            setMessages((messages) => [...messages, response.result]);
          },
          (err) => {
            console.error("getMessagesData error", err);
          }
        );
    });
  };

let nextPageToken; // add me

const getMessages = (labelIds = "INBOX") => {
    // Get List of 20 message's Id
    const request = window.gapi.client.gmail.users.messages.list({
      userId: "me",
      labelIds: labelIds,
      maxResults: 20,
      pageToken: nextPageToken,  // changed
    });
...rest of function
};

const getMessagesData = (response) => {
  nextPageToken = response.nextPageToken;  // add me
  
  const messages = response.result.messages ? response.result.messages : [];
  
  messages.forEach((message) => {
...rest of function
}

function listMessages(userId, query, callback) {
  var getPageOfMessages = function(request, result) {
    request.execute(function(resp) {
      result = result.concat(resp.messages);
      var nextPageToken = resp.nextPageToken;
      if (nextPageToken) {
        request = gapi.client.gmail.users.messages.list({
          'userId': userId,
          'pageToken': nextPageToken,
          'q': query
        });
        getPageOfMessages(request, result);
      } else {
        callback(result);
      }
    });
  };
  var initialRequest = gapi.client.gmail.users.messages.list({
    'userId': userId,
    'q': query
  });
  getPageOfMessages(initialRequest, []);
}