如何在向组件传递分页数据时排除docs数组？

有几种简单的方式可以只传递分页数据、排除docs数组：

方法1：传递时用解构+剩余运算符过滤 #

直接在组件传参的时候，通过对象解构把docs剥离，剩下的分页属性传给Pager：

// 方式A：内联处理
<Pager {...(({ docs, ...paginationData }) => paginationData)(data)} />

// 方式B：提前处理变量，可读性更好
const { docs, ...paginationData } = data;
<Pager {...paginationData} />

方法2：手动提取指定分页字段 #

如果分页字段是固定的，也可以手动提取需要的属性，避免传递多余内容：

<Pager 
  totalDocs={data.totalDocs}
  offset={data.offset}
  limit={data.limit}
  totalPages={data.totalPages}
  page={data.page}
  pagingCounter={data.pagingCounter}
  hasPrevPage={data.hasPrevPage}
  hasNextPage={data.hasNextPage}
  prevPage={data.prevPage}
  nextPage={data.nextPage}
/>

方法3：更新状态时拆分存储 #

在获取数据后，直接把docs和分页数据分别存在不同的状态里，后续传参更直观：

const queryFunction = async () => {
    setLoading(true)
    axios(configFetch)
        .then(res => {
            const { docs, ...paginationData } = res.data;
            setDocs(docs); // 单独存列表数据
            setPagination(paginationData); // 单独存分页数据
        })
}

// 传递时直接用分页状态
<Pager {...pagination} />

内容的提问来源于stack exchange，提问作者Bomber