如何合并/加入两个组件父/子状态反应

如何解决如何合并/加入两个组件父/子状态反应

新手如何处理/合并状态的困境。我有一个我正在尝试创建的库存 UI，我想要实现的是，每次将新项目添加到 ItemVariation 时，它都会附加到 Item 组件。我使用的是 Django 后端并不重要，但我想添加 ItemVation 作为与 Item Table 的反向关系。

类似的东西。 state = [{Item},[{ItemVariation},{ItemVariation}]]

import React,{ useState,useEffect } from 'react';
import axios from 'axios';
import ItemVariation from './ItemVariation';


export const Item = (props) => {
    const fetchCategory = 'http://localhost:8000/api/product/categories/'
    const fetchManufacturer = 'http://localhost:8000/api/product/manufacturers/'
    const fetchBranch = 'http://localhost:8000/api/users/branch/'


    const [manufacturer,setManufacturer] = useState([])
    const [categories,setCategories] = useState([])
    const [branch,setBranch] = useState([])
    const [item,setItem] = useState({
                                        name: '',category: categories,branch: branch,manufacturer: manufacturer,has_size: false,})
    useEffect(() => {
        const cat = axios.get(fetchCategory);
        const man = axios.get(fetchManufacturer);
        const bra = axios.get(fetchBranch);
        
        axios.all([cat,man,bra]).then(axios.spread((...responses) => {
            setCategories(responses[0].data)
            setManufacturer(responses[1].data)
            setBranch(responses[2].data)
            // use/access the results 
          })).catch(errors => {
            // react on errors.
            console.log(errors)
          })
        
    },[])

    return (
        <div>
            <div>
                <label htmlFor="name">Name: </label>
                <input type="text" id="name" name="name" />
            </div>
            <div>
                <label htmlFor="category">Categories: </label>
                <select name="category" id="category" >
                    {categories.map((category,index)=>(
                        <option key={index} value={category.id}>{category.name}</option>
                    ))}
                </select>
            </div>
            <div>
            <label htmlFor="category">Manufacturer: </label>
                <select name="category" id="category" >
                    {manufacturer.map((man,index)=>(
                        <option key={index} value={man.id}>{man.name}</option>
                    ))}
                </select>
            </div>

            <div>
            <label htmlFor="category">Branch: </label>
                <select name="branch" id="branch" >
                    {branch.map((bra,index)=>(
                        <option key={index} value={bra.id}>{bra.name}</option>
                    ))}
                </select>
            </div>
            <div>
                <div>
                    <label htmlFor="has_size">Has Size: </label>
                    <input type="radio" id="has_size" name="has_size" />
                </div>
            </div>
            <hr/>
            {JSON.stringify(item,null,2)}
            <ItemVariation />
        </div>




 import React,{ useState } from 'react'


function ItemVariation(props) {
      const fields = {
            default_product_variation: '',color: '',price: '',quantity: '',model_number: '',sku: '',barcode: '',product_condition: '',size: '',extra_information: ''
      }
      const [variations,setvariations] = useState([fields])

      const handleAddItem = () => {
            setvariations([...variations,fields])
      }
      return (
            <div>
                  {variations.map((variation,index) => (
                        <div key={index}>
                              <div>
                                    <label htmlFor="default_product_variation">Make default: </label>
                                    <input type="radio" id="default_product_variation" name="default_product_variation" />
                              </div>
                              <div>
                                    <label htmlFor="color">Color: </label>
                                    <input type="text" id="color" name="color" />
                              </div>
                              <div>
                                    <label htmlFor="price">Price: </label>
                                    <input type="number" id="price" name="price" />
                              </div>
                              <div>
                                    <label htmlFor="wholesale_price">Wholesale Price: </label>
                                    <input type="number" id="wholesale_price" name="wholesale_price" />
                              </div>
                              <div>
                                    <label htmlFor="quantity">Quantity: </label>
                                    <input type="number" id="quantity" name="quantity" />
                              </div>
                              <div>
                                    <label htmlFor="model_number">Model Number: </label>
                                    <input type="text" id="model_number" name="model_number" />
                              </div>
                              <div>
                                    <label htmlFor="sku">SKU: </label>
                                    <input type="text" id="sku" name="sku" />
                              </div>
                              <div>
                                    <label htmlFor="barcode">Barcode: </label>
                                    <input type="text" id="barcode" name="barcode" />
                              </div>
                              <div>
                                    <div>
                                          <label htmlFor="product_condition">Condition: </label>
                                          <select name="product_condition" id="product_condition">
                                                <option value="1">New</option>
                                                <option value="2">Refurbished</option>
                                                <option value="3">Repurposed</option>
                                          </select>
                                    </div>
                              </div>
                              <div>
                                    <label htmlFor="size">Size: </label>
                                    <input type="text" id="size" name="size" />
                              </div>
                              <div>
                                    <label htmlFor="extra_information">Extra information: </label>
                                    <textarea id="extra_information" name="extra_information"></textarea>
                              </div>
                              <hr />
                        </div>
                  ))}
                  <button type="button" onClick={handleAddItem}>Add Another Item</button>
                 {JSON.stringify(variations,2)}
            </div>
      )
}
export default ItemVariation

我该如何处理？