小编Ian*_*ran的帖子

我尝试使用动作电缆构建聊天页面。我成功地获得了新的消息数据，如

App.room = App.cable.subscriptions.create({
  channel:  "API::V1::TransactionMessageChannel",
  transaction_id: gon.transaction_id
}, {
  connected: function() {},
  disconnected: function() {},
  received: function(data) {
    alert(data["user"]["full_name"]);
  },
  appendLine: function(data) {
    var html = createLine(data)
    $(".chat-area ul").append(html)
  },
  createLine: function(data) {
  }
});

在这里，我将数据作为 JavaScript 对象。我需要渲染一个 rails 部分（里面有很多 ruby​​ 逻辑）

- if @current_user['id'] == data['user']['id']
  li.left.clearfix.admin-chat
    span.chat-img1.pull-right
      img.img-circle alt=data['user']['full_name'] src=display_avatar(data['user']['avatar_url'])
    .chat-content.me.clearfix
      - case data['transaction_message']['activity']
      - when 'attach_image'
        p
          a.img data-fancybox="gallery" href=data['transaction_message']['message']
            img src=data['transaction_message']['message'] style="height:130px;"
      - when 'attach_file'
            p
              a target="_blank" href=data['transaction_message']['message']
                i.fa.fa-file-text-o
                '
                = data['transaction_message']['message'].split('/').last
      - else …

我正在尝试将 queryKey 变量与 useInfiniteQuery 中的 pageParam 一起传递？我已经尝试了一段时间但是：

• 无法获取页面数据
• 在某些情况下，数据会被重复呈现。

我应该如何传递变量？

export const fetchInfiniteVariants = async (
  filters = {},
  { pageParam = 0 }
) => {
  const records = await axios.get(baseURL, {
    headers: authHeader,
    params: {
      pageSize: 24,
      offset: pageParam,
      fields: [
        "name",
        "packshot",
        "packshot_size",
        "brand_logo",
        "price",
        "slug",
      ],
      // filterByFormula: `({validated} = 1)`,
      filterByFormula: `(${filterByFields(filters)})`,
      "sort[0][field]": "priority",
      "sort[0][direction]": "asc",
    },
  })
  return records
}

export const useInfiniteVariantsQuery = (
  initialRecords,
  offset,
  filters = { brand: "HAY" }
) …