Reactjs React无法识别DOM元素上的“totalPrice和totalQuantity”属性，并且超出了最大更新深度错误

我写了一个代码来计算购物车的总数量和总价格。但向子组件发送引用时存在问题。App.js->Navigation.js->CartProcess.js->CartList.js，App.js->CartList.js用于路由 CartProcess有一个如下所示的链接。下面是显示的问题

React无法识别DOM元素上的totalQuantity属性。如果您有意将其作为自定义属性显示在DOM中，请将其拼写为小写的totalquantity。如果意外地从父组件传递了它，请将其从DOM元素中删除

React无法识别DOM元素上的totalPrice道具。如果您有意将其作为自定义属性显示在DOM中，请将其拼写为小写totalprice。如果意外地从父组件传递了它，请将其从DOM元素中删除

我如何解决这些问题

这是我的项目链接

要获取所有类别和产品列表，请使用

json-server --watch db.json

谢谢。

在您的CartList.js中，您实际上是在html中调用导致此问题的函数。试着这样做：

renderTotalPriceAndTotalQuantity(){
        return (
            <div>
                <Alert color="primary">
                Total Price : { this.props.totalPrice }
            </Alert>
            <Alert color="secondary">
                Total Quantity : { this.props.totalQuantity }
            </Alert>
            </div>
        )
    }

---

它不起作用。我看不到结果。如何在警报中看到this.state.totalPrice和this.state.totalQuantity您在哪里渲染cartList函数？我编辑了我的帖子，以在App.jsb中显示我的渲染函数，并共享我的项目链接。

App.js <- Navigation.js <- CartProcess.js

renderTotalPriceAndTotalQuantity(){
        return (
            <div>
                <Alert color="primary">
                Total Price : { this.props.totalPrice() }
            </Alert>
            <Alert color="secondary">
                Total Quantity : { this.props.totalQuantity() }
            </Alert>
            </div>
        )
    }

totalQuantity = () => {
    console.log("totalQuantity");

    this.setState({
      totalQuantity: this.state.cart.reduce(
        (sum = 0, cartItem) => sum + cartItem.quantity,
        0
      )
    });

    console.log(this.state.totalQuantity);
  }

  totalPrice = () => {
    console.log("totalPrice");

    this.setState({
      totalPrice: this.state.cart.reduce(
        (sum = 0, cartItem) => sum + cartItem.quantity * cartItem.product.unitPrice,
        0
      )
    });

    console.log(this.state.totalPrice);
  }

json-server --watch db.json

renderTotalPriceAndTotalQuantity(){
        return (
            <div>
                <Alert color="primary">
                Total Price : { this.props.totalPrice }
            </Alert>
            <Alert color="secondary">
                Total Quantity : { this.props.totalQuantity }
            </Alert>
            </div>
        )
    }