第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

如何將數(shù)據(jù)從映射對(duì)象傳遞到 React 中的父組件？

如何將數(shù)據(jù)從映射對(duì)象傳遞到 React 中的父組件？

HUX布斯 2023-03-10 15:04:24
我正在構(gòu)建一個(gè)購(gòu)物車應(yīng)用程序，該應(yīng)用程序?qū)⒚總€(gè)項(xiàng)目都作為卡片組件包含在內(nèi)。我通過(guò)映射一些虛擬對(duì)象數(shù)據(jù)來(lái)渲染這些卡片，如下所示：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>    </>  )}現(xiàn)在單擊每張卡片中的按鈕，我想將數(shù)據(jù)（卡片的 ID 和商品的價(jià)格）發(fā)送回父組件Home。假設(shè)點(diǎn)擊了第二張卡片，我想訪問(wèn)id并price進(jìn)入Home.編輯： 也許我沒(méi)有說(shuō)清楚，我想在handleAddToCart功能中訪問(wèn)點(diǎn)擊卡的價(jià)格和 ID。
查看完整描述

2 回答

?
至尊寶的傳說(shuō)

TA貢獻(xiàn)1789條經(jīng)驗(yàn) 獲得超10個(gè)贊

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


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


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

  <div>

    {name}

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

  </div>

或者像這樣傳遞一個(gè)包含值的回調(diào)：


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


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

  <div>

    {name}

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

  </div>


查看完整回答
反對(duì) 回復(fù) 2023-03-10
?
慕田峪7331174

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超13個(gè)贊

在<Home />組件中，首先您可以使用 as 引入一個(gè)新狀態(tài)useState：


const [selectedItem, setSelectedItem] = useState(null)

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


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

      setSelectedItem={setSelectedItem} />

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


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

  return (

    <>

      <div key={id}>

        <p>{title}</>

        <p>{price}</>

        <button onClick={() => {

            handleAddToCart();

            setSelectedItem({ id, title, price});

        }}>Add to cart</button>

      </div>

    </>

  )

}

+1 建議：


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


<Card key={d.id}

      data=nhkv1sx5v02o

      handleAddToCart={handleAddToCart}

      setSelectedItem={setSelectedItem} />

然后將內(nèi)部解構(gòu)為：


const Card = (props) => {

   const { data, setSelectedItem, handleAddToCart } = props

   const { id, title, price } = data


   // more code

}


查看完整回答
反對(duì) 回復(fù) 2023-03-10
  • 2 回答
  • 0 關(guān)注
  • 132 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)