Javascript 如何将更改后的对象返回到下载该对象的组件？

我将

selectedProduct

移动到

Products

组件。然后我将新值添加到属性

selectedProduct

。如何将此对象返回到组件

App

到

products

数组

应用程序

class App extends Component {
  constructor(){
    super();

    this.state {
      products: [  
            {
                color: ['black', 'orange']
                desc: 'gfgfg'
            },
            {
                color: ['yellow'],
                desc: 'gfgfgfg'
            }
        ]
    }

  }

  add = (updateProduct) => { 
    const {products} = this.state; 
    this.setState({ 
        products: [...products, updateProduct] 
    }) 
  }


  render () {
    let selectedProduct = this.state.products[0];

    return (
      <div>
        <ul>
            {
                this.state.products
                .map((product, index) =>
                    <Product
                        key={index}
                        index={index}
                        product={product}
                    />
                )
            }
        </ul>
          <Products
            selectedProduct = {selectedProduct}
            add={this.add}
          />
      </div>
    )
  } 
}

export default App;

类应用程序扩展组件{
构造函数（）{
超级（）；
这个州{
产品：[
{
颜色：[“黑色”、“橙色”]
描述：“GFG”
},
{
颜色：[“黄色”]，
描述：“GFG”
}
]
}
}
add=（updateProduct）=>{
const{products}=this.state；
这个.setState（{
产品：[……产品，更新产品]
}) 
}
渲染（）{
设selectedProduct=this.state.products[0]；
返回(

{
这是国家的产品
.map（（产品、索引）=>
)
}

)
} 
}
导出默认应用程序；

产品

class Products extends Component {
    constructor(){
        super();

        this.state = {
            selectProduct: [{
                color: ['black', 'orange', 'pink]
                desc: 'gfgfg'
            }]
        }
    }

    componentDidUpdate (prevProps) {
        if (prevProps.selectedProduct !== this.props.selectedProduct) {
            this.setState({
                selectProduct:  this.props.selectedProduct
            });
            if (this.props.add) {
                this.props.add(this.state.selectProduct) 
            }
        }
    }

  render () {
    return (
      <div>
      </div>
    )
  } 
}

类产品扩展组件{
构造函数（）{
超级（）；
此.state={
选择产品：[{
颜色：[“黑色”、“橙色”、“粉色]
描述：“GFG”
}]
}
}
componentDidUpdate（prevProps）{
如果（prevProps.selectedProduct！==此.props.selectedProduct）{
这是我的国家({
selectProduct:this.props.selectedProduct
});
if（this.props.add）{
this.props.add（this.state.selectProduct）
}
}
}
渲染（）{
返回(
)
} 
}

您需要将更改传播回App，在您的情况下，您可以在父组件中设置一个

changeState

函数，并将其作为属性向下传播。有关更多信息，请参见此处

有多种选择，我建议使用钩子和上下文API，例如：