如何将数据 totalAmount 从子组件传递到父组件再传递给另一个子组件？

Question

我有来自 cart.js 的 totalAmount 数据，我如何将它传递给父组件 (app.js)，在那里我可以将它传递给另一个子组件(info.js)。我尝试将它从 Cart.js 传递给父级，它不会工作，这就是它会显示的内容：

Identifier 'totalAmount' has already been declared

codesandbox: https://codesandbox.io/s/add-to-cart-sampled-2-with-material-ui-table-pagination-with-reduced-cart-items-firebase-5id6gs?file=/src/Cart.js**strong 文本**

在cart.js

const Cart = ({ cartItems, handleCartClearance, handleRemove, handleAdd }) => {

  const totalAmount = cartItems.reduce(
    (price, item) => price + item.quantity * item.price,
    0
  );

  return (
    <div>

    </div>
  );
};

export default Cart;

在App.js 如何将 totalAmount 传递给 customerInfo 组件？

export default function App() {

  return (
    <div className="App">
      <CustomerInfo cartItems={cartItems} /> 
      <br />
          <Cart
            cartItems={cartItems}
            handleCartClearance={handleCartClearance}
            handleRemove={handleRemove}
            handleAdd={handleAdd}
          />
      </Stack>
    </div>
  );
}

CustomerInfo 组件：

const CustomerInfo = ({ cartItems }) => {
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(firstName, number, "info");
    console.log(cartItems, "cartItems, info");
    //console the totalAmount here
  };

  return (
    <Container style={{ padding: "12px" }}>

    </Container>
  );
};

export default CustomerInfo;

Answer 1

由于totalAmount的计算只基于cartItems，它是Cart的一个prop。我相信这不是 Cart 的责任来计算它，而是它的责任 parent.

如何将数据 totalAmount 从子组件传递到父组件再传递给另一个子组件？

How do I pass the data totalAmount from the child to parent to another child component again?

javascript

reactjs

material-ui