ReactJS onClick多函数调用问题：清空购物车后Toast不显示

你的问题核心是**ToastContainer被放在了仅当购物车非空时才渲染的区块里**：调用emptyCart()后，购物车状态变为空，包含ToastContainer的底部操作栏被卸载，导致toast失去了渲染容器，自然无法显示。

修复方案 #

把<ToastContainer />从条件渲染的区块中移出，放到组件的根容器内，确保它始终存在于DOM中，不受购物车状态影响。

修改后的代码片段 #

return (
    <Container className="py-4 mt-5">
        <h1 className={`${theme ? 'text-light' : 'text-light-primary'} my-5 text-center`}>
            {isEmpty ? 'Your Cart is Empty' : 'The Cart'}
        </h1>
        <Row className="justify-content-center">
            {/* 表格部分代码保持不变 */}
            <Table responsive="sm" striped bordered hover variant={theme ? 'dark' : 'light'} className="mb-5">
                <tbody>
                    {items.map((item, index) => {
                        return (
                            <tr key={index}>
                                {/* 表格行内容不变 */}
                            </tr>
                        )
                    })}
                </tbody>
            </Table>

            {!isEmpty &&
                <Row
                    style={{ bottom: 0 }}
                    className={`${theme ? 'bg-light-black text-light' : 'bg-light text-balck'} justify-content-center w-100`}
                >
                    <Col className="py-2">
                        <h4>Total Price: $ {cartTotal}</h4>
                    </Col>
                    <Col className="p-0" md={4}>
                        <Button variant="danger"
                            className="m-2"
                            onClick={() => emptyCart()}
                        >
                            <BsCartX size="1.7rem" />
                            Clear Cart
                        </Button>
                        <Button onClick={notify} variant="success" className="m-2">
                            <BsCartCheck size="1.7rem" />
                            Checkout
                        </Button>
                    </Col>
                </Row>}
        </Row>
        {/* 把ToastContainer移到这里，确保始终存在于DOM中 */}
        <ToastContainer />
    </Container>
);

这样修改后，即使emptyCart()触发购物车清空，ToastContainer依然存在，toast消息就能正常显示了。

内容的提问来源于stack exchange，提问作者Ilkin Karimov