從子組件傳遞時將 state 保存在父組件中 - 用於多個項目（React Hooks）

Question

我希望將項目詳細信息從子項傳遞給父項並在父項中另存為 state，我可以將其與值一起傳遞，但隨后它全部返回為字符串，但我想知道是否有任何方法可以傳遞為 object因為它會幫助我在父組件中工作時識別鍵值對。

// 這個按鈕來自子組件

        <Button name={producNumber} value={[productName, producNumber, price, desc, photo, stockQuantity, quantities[productName]]} variant="primary" onClick={(e) => {
          { addBasketitems(e) }

另外，我希望在父級中創建一個籃子（在子組件中選擇所有選定的客戶項目/詳細信息），並且因為我能夠從子級傳遞父級中的產品詳細信息（當客戶單擊按鈕時）但保存the state i am a bit confused, as the customer can select multiple products, i was thinking of making state as (object of each product) but then i dont know how many items will the user select and user can add more items in existing selected項目太。

任何建議的家伙。 謝謝

子組件的片段

const [quantities, setQuantites] = useState(initialQuantities)

 return (
    <div className="products">
      {searchProducts.map((eachproduct) => {
        let productName = eachproduct.product_name;
        let producNumber = eachproduct.producNumber;
        let price = eachproduct.price;
        let desc = eachproduct.productDescription;
        let photo = eachproduct.image_URL;
        let stockQuantity = eachproduct.stockQuantity;
        return (
          <div className="products" key={producNumber}>
            <ul >
              <li>
                <img className="products-image" src={photo} />
              </li>
              <li>{productName} </li>
              <li>
                Item No:{producNumber}(InStock:{stockQuantity})
              </li>
              <li>price:{price}£ </li>
              <li>{desc}</li>
              <li>
                <ButtonGroup aria-label="quantityofproduct">
                  <Button variant="secondary" name="subtract" value="subtract" onClick={() => decrease(productName)}
                  >
                    -
                  </Button>
                  <Button name={productName} variant="secondary">
                    {quantities[productName]} // its quantity of product that customer selected
                  </Button>
                  <Button variant="secondary" name="add" value="add" onClick={() => increase(productName)}
                  >
                    +
                  </Button>
                </ButtonGroup>
                &nbsp;
         // here below in value i am passing the product detail when customer selected that product
                <Button name={producNumber} value={[productName, producNumber, price, desc, photo, stockQuantity, quantities[productName]]} variant="primary" onClick={(event) => {
                 
                  { addBasketitems(event) }}>

父組件的片段

// 我正在接收來自孩子的字符串（產品詳細信息），並查看是否可以以某種方式將其保存在 state 中，我將再次將其傳遞給另一個孩子

function App() {

const [basketItems, setBasketItems] = useState({}) // saving here the customer selected products

const addBasketitems = (event) => {
    let x = event.currentTarget.value.split(",") // i have converted the string into array but not sure from here what i can do to save mulitple products in basketItems

}

 return (
<Home {...props} userData={userData} userstatus={siginalready} addBasketitems={addBasketitems}>
}

更新：1 // 下面是每個產品 object

更新：2

這里創建了兩個對象（一個數量=3，其他數量=7）而不是一個更新數量=7

Answer 1

通過整個object

<Button name={producNumber} variant="primary" 
  onClick={() => addBasketitems({...eachproduct, quantities[productName]})}>

然后將其保存在您的父母 state

const [basketItems, setBasketItems] = useState([]) // better to be an array
const addBasketitems = (product) => {
  setBasketItems(prevItems => [...prevItems, product])
}

或者

通過 object 和數量

<Button name={producNumber} variant="primary" 
  onClick={() => addBasketitems(eachproduct, quantities[productName])}>

然后將其保存在您的父母 state

const [basketItems, setBasketItems] = useState([]) // better to be an array
const addBasketitems = (product, quantity) => {
  setBasketItems(prevItems => [...prevItems, {...product, quantity}])
}