UI未在List React虚拟化的列表中更新

Question

您好，我在使用react-virtualized List渲染卡组件列表（760+）时遇到了问题，这就是我的应用程序的外观

在右侧，我有具有3个按钮的Card组件列表，单击时首先显示信息，打开下面的表格，然后添加到购物车，并在用户单击此Add按钮时将其从购物车按钮中删除，从而添加当前处于状态的卡数据到购物车数组，UI重新呈现列表，并在较早时显示从卡中删除按钮，我在没有库的情况下呈现了所有内容，UI花费了大约10秒钟的时间进行更新，因为整个列表都需要重新呈现购物车中的位置。现在，有了该库，每当用户单击任何按钮时，UI都不会更新列表中的组件。如果单击添加，则购物车值会得到更新，但UI不会更改，并且“添加”按钮仍在那里，并且“显示信息”也无法正常工作，在google之后，我看到了几个建议使用ref来强制更新和重新渲染的答案列表，因为它比较浅，但是仍然无法正常工作，并且Doc有点混乱。请向我建议我要去哪里哪里，这是我的代码的一部分：-

class CartList extends Component {

    state = {
        activeAccordionIndex: null,
        cart: [],
        showModal: false,
        company: "",
        email: "",
        phone: "",
        list: []
    }

    showInfoAccordion = (key) => {
        const { activeAccordionIndex } = this.state;

        if (activeAccordionIndex !== null) {
            this.setState({ activeAccordionIndex: null, card: true })
        } else {
            this.setState({ activeAccordionIndex: key, card: false })
        }
    }

    handleAddToCart = (site) => {
        // console.log("Add to cart", site);
        this.setState({ cart: [...this.state.cart, site] }, () => {

            this.refs.forceUpdateGrid(); // for update

        });

    }

    handleRemoveFromCart = (site) => {
        const cart = [...this.state.cart];
        const index = cart.indexOf(site);
        cart.splice(index, 1);
        this.setState({ cart }, () => {
            this.refs.forceUpdateGrid();  // for update
        });
    }

    showButtons = (site) => {
        const { cart } = this.state;
        const found = cart.indexOf(site);

        if (found !== -1) {
            return <Button onClick={() => this.handleRemoveFromCart(site)} negative>
                Remove
                </Button>
        } else {
            return <Button onClick={() => this.handleAddToCart(site)} positive>
                Add
            </Button>
        }
    }

    generateCardList = () => {
        const { sites } = this.props;
        const { activeAccordionIndex, card } = this.state;

        const list = sites.map((site, i) => {
            return <Card key={i}>
                <Image rounded centered size="big" src={this.imageUrl(site)} />
                <CardContent >
                    <CardHeader>{site["Location Name"]}</CardHeader>
                    <CardMeta>{site["Screen Type"]}</CardMeta>
                </CardContent>
                <Card.Content extra>
                    {/* {this.showButtons(site)} */}
                    <Accordion>
                        <AccordionTitle>
                            <Button
                                onClick={() => this.showInfoAccordion(i)}
                                primary
                            >
                                Show Info
                        </Button>
                            {this.showButtons(site)}
                        </AccordionTitle>
                        <AccordionContent active={activeAccordionIndex === i}>
                            <Table compact celled striped>
                                <TableBody>
                                    <TableRow>
                                        <TableCell>State</TableCell>
                                        <TableCell>{site["State"]}</TableCell>
                                    </TableRow>
                                    <TableRow>
                                        <TableCell>City</TableCell>
                                        <TableCell>{site["City"]}</TableCell>
                                    </TableRow>
                                    <TableRow>
                                        <TableCell>Network</TableCell>
                                        <TableCell>{site["Network"]}</TableCell>
                                    </TableRow>
                                    <TableRow>
                                        <TableCell>Detailed address</TableCell>
                                        <TableCell>{site["Detailed address"]}</TableCell>
                                    </TableRow>
                                    <TableRow>
                                        <TableCell>Screen Size (in Inches)</TableCell>
                                        <TableCell>{site["Screen Size (in Inches)"]}</TableCell>
                                    </TableRow>
                                </TableBody>
                            </Table>
                        </AccordionContent>
                    </Accordion>
                </Card.Content>
            </Card>
        });

        this.setState({ list });

    }

    rowRenderer = ({
        key,
        index,
        isScrolling,
        style
    }) => {
        const { list } = this.state;
        return (
            <div key={key} style={style}>
                {list[index]}
            </div>
        )
    }


    componentDidMount() {
        const { sites } = this.props;
        // this.setState({ sites });
        // console.log("DidMount :", sites);
        if (sites.length > 0) {
            this.generateCardList();
        }
    }

    render() {
        console.log(this.state.list[0]);

        return (
            <React.Fragment>
                <p>Cart : {this.state.cart.length}</p>
                {/* <ContactUs cart={this.state.cart.length} cartSites={this.state.cart} /> */}

                <AutoSizer disableHeight>
                    {({ width }) => (

                        <List
                            ref={ref => this.refs = ref} // My ref
                            width={width}
                            height={700}
                            rowCount={this.state.list.length}
                            rowHeight={400}
                            rowRenderer={this.rowRenderer}
                            overscanRowCount={3}

                        />

                    )}
                </AutoSizer>

            </React.Fragment>
        )
    }
}

export default connect(null, {})(CartList);