如何在 React 中将数据从映射对象传递到其父组件？

Question

我正在构建一个购物车应用程序，该应用程序包含每个项目作为卡片组件。 我通过映射一些虚拟对象数据来渲染这些卡片，如下所示：

 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组件。 假设第二张卡被点击，我想访问Home id和price 。

编辑：也许我没有说清楚，我想在handleAddToCart函数中访问点击卡的价格和 ID。

Answer 1

您可以将处理程序向下传递并让孩子将详细信息传递给它，如下所示：

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}
    <button onClick={addToCart}>Add to Cart</button>
  </div>

Answer 2

在<Home />组件中，首先你可以使用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 (
    <>
      <div key={id}>
        <p>{title}</>
        <p>{price}</>
        <button onClick={() => {
            handleAddToCart();
            setSelectedItem({ id, title, price});
        }}>Add to cart</button>
      </div>
    </>
  )
}

+1 建议：

我会将一个属性中的详细信息传递给<Card />组件，如下所示：

<Card key={d.id}
      data={d}
      handleAddToCart={handleAddToCart}
      setSelectedItem={setSelectedItem} />

然后将内部解构为：

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

   // more code
}