如何阻止页面在单击时重新呈现

时间:2019-06-03 21:40:01

标签: reactjs pagination material-ui apollo-client material-table

我有一个材料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;
      }}

如果您要我分享其他信息,请告诉我。谢谢。

0 个答案:

没有答案