我有一个材料UI表,该表使用React能见度传感器和React Apollo GraphQL查询在滚动时填充记录。当我单击特定记录时,它将重新呈现该页面,从而导致滚动中断并且该表不显示任何记录。您能帮忙解决此错误吗?任何帮助表示赞赏。
我有一个onclick方法,用于填充表格点击记录。
onClick={() =>
callBack({
row: index,
eventDetails: JSON.stringify(messageJson, null, 1),
})
}
这是我获取更多记录并使用可见性传感器在滚动时填充它们的方式
{({ 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
: offsetValue,
},
updateQuery: (
prev: any,
{ fetchMoreResult }: any,
) => {
if (
fetchMoreResult.vitm_truck_message.length !== 0
) {
offsetValue = data.vitm_truck_message.length;
fetchMoreResult.vitm_truck_message.forEach(
(element: object) => {
data.vitm_truck_message.push(element);
},
);
}
return prev;
},
})
: undefined
}
>
<DataRowComponent
{...rowData}
index={index}
selectedRow={selectedRow}
callBack={callBack}
/>
</VisibilitySensor>
) : null;
},
)
: null;
}}
如果您要我分享其他信息,请告诉我。谢谢。