2

我正在使用react-redux-firebasewithreselect并react-virtualized尝试显示一个 500~ 项列表，其中包含将在后台更改、添加或删除的条目。

每次在 firebase 上更改单个条目时，我的表函数组件都会从 redux 检索所有 500 条记录，然后再次重新呈现整个表，而不是更改的特定行。

曾希望reselect与 with 一起使用react-virtualized可以解决这个问题，唉，我现在想知道这是否是由于我在某些专栏中使用三元组的事实引起的，还是还有其他问题？

如果没有关于表/行调整的解决方案，是否可以对来自useFireStoreConnector的更新进行去抖动/限制useSelector，所以我最多只能每 2/3 秒更新一次表？

const itemsSelector: any = createSelector(
    (state: any) => state.firestore.ordered.items,
    items => items
);

const ItemsTable: React.FC = React.memo(() => {

    useFirestoreConnect('items');

    const items: any = useSelector((state: any) => itemsSelector(state));

    console.log(items) // 500~ firestore items, called every time there's a change to one entry

    ...

    // The entire table is being re-rendered every time a single firebase entry that's been synced to redux is changed
    return (
        <AutoSizer>
            {({ height, width }) => (
                <Table
                    width={width}
                    height={height}
                    headerHeight={48}
                    rowHeight={48}
                    rowCount={items.length}
                    rowGetter={({ index }) => items[index]}
                >

                    <Column
                        label="Status"
                        dataKey="status.name"
                        cellRenderer={({ rowData }) =>
                            rowData.status ? rowData.status.name : '-'
                        }
                        width={100}
                    />
     ...
4

0 回答 0