如何在用户滚动 material UI table 时加载更多数据
How to load more data when user scrolls in material UI table
我正在执行 GraphQL 查询以在我的 Material UI table 中加载数据。我希望它在滚动时加载更多数据。
数据在 table 中正确填充,分页功能无法正常工作。
return (
<Query
query={MESSAGE_QUERY}
variables={{
where: getQueryVariables({
date,
}),
limit: 50,
offset: 0,
sortingOrder,
}}
fetchPolicy="cache-and-network"
>
{({ data, fetchMore }: QueryResult) => {
fetchMore({
variables: {
offset: data.message
? data.message.length
: 0,
},
updateQuery: (
prevResult: { DataRowProps: any },
{ fetchMoreResult }: any,
) => {
if (!fetchMoreResult) return prevResult;
return Object.assign({}, prevResult, {
...fetchMoreResult.DataRowProps,
});
},
});
return data.message
? data.message.map(
(rowData: DataRowProps, index: number) => {
return containmentDOMRect ? (
<VisibilitySensor
containment={containmentDOMRect.current || undefined}
onChange={isVisible =>
isVisible && index % LOAD_SIZE === 0 && index >= LOAD_SIZE
? loadMoreData(index)
: undefined
}
>
<DataRowComponent
{...rowData}
index={index}
selectedRow={selectedRow}
callBack={callBack}
/>
</VisibilitySensor>
) : null;
},
)
: null;
}}
</Query>
);
};
我在 运行 代码时没有看到任何错误,但它没有在滚动上加载更多数据。由于堆栈溢出限制,我删除了一些不重要的代码,如果需要提供,请告诉我。非常感谢任何帮助。
fecthMore 和更新查询功能的正确使用方法是在 VisibilitySensor 标签内:
{({ data, fetchMore }: QueryResult) => {
return data.vitm_truck_message
? data.vitm_truck_message.map(
(rowData: DataRowProps, index: number) => {
const visibilitySensorKey = rowData.message_type.name
.concat(rowData.message_sub_type.name)
.concat(rowData.created_time);
return containmentDOMRect ? (
<VisibilitySensor
key={visibilitySensorKey}
containment={containmentDOMRect.current || undefined}
scrollCheck
onChange={isVisible =>
isVisible && index % LOAD_SIZE === 0 && index >= LOAD_SIZE
? fetchMore({
variables: {
offset: data.vitm_truck_message
? data.vitm_truck_message.length
: 0,
},
updateQuery: (
prev: any,
{ fetchMoreResult }: any,
) => {
if (
fetchMoreResult.vitm_truck_message.length !== 0
) {
offsetValue = data.vitm_truck_message.length;
prev.vitm_truck_message.forEach(
(element: object) => {
if (
data.vitm_truck_message.indexOf(element) <
0
) {
data.vitm_truck_message.push(element);
}
},
);
fetchMoreResult.vitm_truck_message.forEach(
(element: object) => {
if (
data.vitm_truck_message.indexOf(element) <
0
) {
data.vitm_truck_message.push(element);
}
},
);
}
return prev;
},
})
: undefined
}
>
<DataRowComponent
{...rowData}
index={index}
selectedRow={selectedRow}
callBack={callBack}
/>
</VisibilitySensor>
) : null;
},
)
: null;
}}
我正在执行 GraphQL 查询以在我的 Material UI table 中加载数据。我希望它在滚动时加载更多数据。
数据在 table 中正确填充,分页功能无法正常工作。
return (
<Query
query={MESSAGE_QUERY}
variables={{
where: getQueryVariables({
date,
}),
limit: 50,
offset: 0,
sortingOrder,
}}
fetchPolicy="cache-and-network"
>
{({ data, fetchMore }: QueryResult) => {
fetchMore({
variables: {
offset: data.message
? data.message.length
: 0,
},
updateQuery: (
prevResult: { DataRowProps: any },
{ fetchMoreResult }: any,
) => {
if (!fetchMoreResult) return prevResult;
return Object.assign({}, prevResult, {
...fetchMoreResult.DataRowProps,
});
},
});
return data.message
? data.message.map(
(rowData: DataRowProps, index: number) => {
return containmentDOMRect ? (
<VisibilitySensor
containment={containmentDOMRect.current || undefined}
onChange={isVisible =>
isVisible && index % LOAD_SIZE === 0 && index >= LOAD_SIZE
? loadMoreData(index)
: undefined
}
>
<DataRowComponent
{...rowData}
index={index}
selectedRow={selectedRow}
callBack={callBack}
/>
</VisibilitySensor>
) : null;
},
)
: null;
}}
</Query>
);
};
我在 运行 代码时没有看到任何错误,但它没有在滚动上加载更多数据。由于堆栈溢出限制,我删除了一些不重要的代码,如果需要提供,请告诉我。非常感谢任何帮助。
fecthMore 和更新查询功能的正确使用方法是在 VisibilitySensor 标签内:
{({ data, fetchMore }: QueryResult) => {
return data.vitm_truck_message
? data.vitm_truck_message.map(
(rowData: DataRowProps, index: number) => {
const visibilitySensorKey = rowData.message_type.name
.concat(rowData.message_sub_type.name)
.concat(rowData.created_time);
return containmentDOMRect ? (
<VisibilitySensor
key={visibilitySensorKey}
containment={containmentDOMRect.current || undefined}
scrollCheck
onChange={isVisible =>
isVisible && index % LOAD_SIZE === 0 && index >= LOAD_SIZE
? fetchMore({
variables: {
offset: data.vitm_truck_message
? data.vitm_truck_message.length
: 0,
},
updateQuery: (
prev: any,
{ fetchMoreResult }: any,
) => {
if (
fetchMoreResult.vitm_truck_message.length !== 0
) {
offsetValue = data.vitm_truck_message.length;
prev.vitm_truck_message.forEach(
(element: object) => {
if (
data.vitm_truck_message.indexOf(element) <
0
) {
data.vitm_truck_message.push(element);
}
},
);
fetchMoreResult.vitm_truck_message.forEach(
(element: object) => {
if (
data.vitm_truck_message.indexOf(element) <
0
) {
data.vitm_truck_message.push(element);
}
},
);
}
return prev;
},
})
: undefined
}
>
<DataRowComponent
{...rowData}
index={index}
selectedRow={selectedRow}
callBack={callBack}
/>
</VisibilitySensor>
) : null;
},
)
: null;
}}