Как вернуть измененный объект в компонент, из которого он был загружен?

Question

Я переместил 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;

Продукты

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>
    )
  } 
}

Answer 1

Вам необходимо распространить изменения обратно в App, в вашем случае вы можете установить функцию changeState в родительском компоненте и распространить ее как свойство.См. Здесь для получения дополнительной информации Как обновить состояние родителя в React?

Существует несколько вариантов, хотя я бы рекомендовал использовать ловушки и Context API, например: https://upmostly.com/tutorials/how-to-use-the-usecontext-hook-in-react/