如何将数据从 map 函数传递到 React 中的兄弟组件？

Question

我有一个购物车，它使用map根据数组对象呈现多张卡片。 每张卡片包含商品价格、点击按钮可增加的商品数量、商品总价=价格*数量。 底部有一个信息栏，我想在用户单击添加按钮时显示所有卡片的总价。 这是一个工作示例： https : //codesandbox.io/s/brave-hamilton-4o1l1 ？

这是代码：

主页.js：

 import React, {useState} from 'react'; import Card from './Card'; import Infobar from './Infobar'; const Home = () => { const dummyData = [ { id: 1, title: 'hat', price: 10 }, { id: 2, title: 'tshirt', price: 11 } ] const [quantity, setQuantity] = useState([]); const changeItemQuantity = (id, itemQty) => { let _newState = [...quantity]; let _itemInfo = _newState.find(item => item.id === id); if (_itemInfo !== undefined) { _itemInfo.itemQty += 1; } else { _newState.push({ id: id, itemQty: itemQty + 1 }); }; setQuantity(_newState); } const RenderCards = () => { let _totalPrice = 0; return ( dummyData.map( (d) => { const stateItem = quantity.find(item => item.id === d.id); const itemQty = stateItem ? stateItem.itemQty : 0; _totalPrice += d.price * itemQty; console.log(_totalPrice); // correct value to send to Infobar return ( <Card key={d.id} id={d.id} title={d.title} price={d.price} quantity={itemQty} changeItemQuantity={changeItemQuantity} itemTotalPrice={d.price * itemQty} /> ) } ) ) } return ( <> <RenderCards/> <Infobar totalPrice={0}/> // here Infobar should take total price as an input </> ) } export default Home;

Card.js：

 import React from 'react'; const Card = ({ id, title, price, quantity, changeItemQuantity, itemTotalPrice }) => { return ( <> <div key={id}> <p>{id}. {title}</p> <p>Quantity: {quantity}</p> <p>Price: {price}</p> <p>Item total price: {itemTotalPrice}</p> <button onClick={() => changeItemQuantity(id, 0)}>Add item</button> </div> </> ) } export default Card

信息栏.js：

 import React from 'react'; const Infobar = ({ totalPrice }) => { return ( <div>Total Price: {totalPrice}</div> ) } export default Infobar;

现在的问题是，信息栏中所有项目的总价不会改变（我将 0 作为虚拟数据传递）。 我需要计算所有商品的总价并将其传递给Infobar 。 我已经计算了_totalPrice中 _totalPrice 的正确值，如何将_totalPrice传递给 Infobar？

Answer 1

为什么不添加一个新状态const [total, setTotal] = useState(0); 和你设置数量的方式一样吗？ 您设置放置日志的总数并将总数传递给您的信息栏组件。

但是，尽管它有效，但我发现您放置代码的方式存在一些问题，为什么要在您的主组件中创建一个组件而不是让 Card 处理所有逻辑？

Answer 2

我已经更新了您需要使用内部状态来导致重新渲染的沙箱。

你真的应该看看文档。 至少阅读主要概念部分和钩子部分的 1 - 12。 您提供的示例中有几个部分，您选择了不适用于 React 的突变和命令式语句。

更新的沙盒

关联

命令式与声明式反应

这里有很好的例子来解释差异。

而不是给出特定的指令，例如尝试改变totalPrice变量选择useState和useEffect并让您的 jsx 成为 state 和 props 的结果。