首頁猿問如何將數據從映射對象傳遞到...

如何將數據從映射對象傳遞到 React 中的父組件？

JavaScript

HUX布斯 2023-03-10 15:04:24

我正在構建一個購物車應用程序，該應用程序將每個項目都作為卡片組件包含在內。我通過映射一些虛擬對象數據來渲染這些卡片，如下所示：const Home = () => { const dummyData = [ { id: 1, title: 'tshirt', price: 10 }, { id: 2, title: 'coat', price: 20 } ] const RenderCards = () => { return ( dummyData.map( (d) => { return ( <Card key={d.id} title={d.title} price={d.price} handleAddToCart={handleAddToCart}/> ) } ) ) } const handleAddToCart = () => { // maybe access id and price here? } return ( <> <RenderCards /> </> )}和Card正在渲染的組件：const Card = ({id, title, price}) => { return ( <> <div key={id}> <p>{title}</> <p>{price}</> <button onClick={handleAddToCart}>Add to cart</button> </div> </> )}現在單擊每張卡片中的按鈕，我想將數據（卡片的 ID 和商品的價格）發送回父組件Home。假設點擊了第二張卡片，我想訪問id并price進入Home.編輯：也許我沒有說清楚，我想在handleAddToCart功能中訪問點擊卡的價格和 ID。

查看完整描述

2 回答

至尊寶的傳說

TA貢獻1789條經驗獲得超10個贊

您可以向下傳遞處理程序并讓孩子將詳細信息傳遞給它，如下所示：

items.map(item => <Item addToCart={addToCart} {...item} />)

const Item = ({ id, name, addToCart }) =>

<div>

{name}

<button onClick={() => addToCart(id)}>Add to Cart</button>

</div>

或者像這樣傳遞一個包含值的回調：

items.map(item => <Item addToCart={() => handleAddToCart(item.id)} {...item} />)

const Item = ({ id, name, addToCart }) =>

<div>

{name}

</div>

反對回復 2023-03-10

慕田峪7331174

TA貢獻1828條經驗獲得超13個贊

在<Home />組件中，首先您可以使用 as 引入一個新狀態useState：

const [selectedItem, setSelectedItem] = useState(null)

然后向下傳遞道具，setSelectedItem以便能夠在那里觸發：

<Card key={d.id} title={d.title} price={d.price} handleAddToCart={handleAddToCart}

setSelectedItem={setSelectedItem} />

然后在<Card />組件中用作：

const Card = ({id, title, price, setSelectedItem}) => {

return (

<p>{title}</>

<p>{price}</>

<button onClick={() => {

handleAddToCart();

setSelectedItem({ id, title, price});

}}>Add to cart</button>

</div>

</>

)

}

+1 建議：

<Card />我會將一個屬性中的詳細信息傳遞給組件，如下所示：

<Card key={d.id}

data=xzq8fbi

handleAddToCart={handleAddToCart}

setSelectedItem={setSelectedItem} />

然后將內部解構為：

const Card = (props) => {

const { data, setSelectedItem, handleAddToCart } = props

const { id, title, price } = data

// more code

}

反對回復 2023-03-10

2 回答
0 關注
126 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何將數據從映射對象傳遞到 React 中的父組件？

如何將數據從映射對象傳遞到 React 中的父組件？

2 回答

添加回答

如何將數據從映射對象傳遞到 React 中的父組件？

如何將數據從映射對象傳遞到 React 中的父組件？