Я пытался сделать покупки в React, я не использую Redux, поэтому я думаю, что это тоже может быть проблемой. Сейчас я сделал почти все приложение, поэтому хочу завершить его таким образом, не используя приставку. Хорошо, в чем проблема. Я сделал функцию добавления товаров в корзину в счетчике компонентов, но я не хочу отображать эти продукты в этом компоненте, а в главном компоненте приложения в заголовке. В счетчике компонентов я создал компонент ShoppingCart для отображения продуктов, но я хочу только вставить продукты в ShoppingCart, но отобразить их в компоненте App.
Я пробовал много разных методов, но они не работают. Я могу показывать товары, но на самом деле не там, где хочу. Я думаю, проблема в том, как я могу общаться со своими предметами между компонентами.
Это мой счетчик
import React, { Component } from "react";
import "./Counter";
import "./Counter.css";
import ShoppingCart from "./ShoppingCart";
class Counter extends Component {
state = {
availableProducts: 20,
shoppingCart: 0,
cart: []
};
handleRemoveFromCart = () => {
this.setState({
shoppingCart: this.state.shoppingCart - 1
});
};
handleAddToCart = () => {
this.setState({
shoppingCart: this.state.shoppingCart + 1
});
};
handleAddProductsToCart = props => {
// console.log("clicked", this.props.name, this.state.shoppingCart)
let found = false;
const updateCart = this.state.cart.map(cartItem => {
if (cartItem.name === this.props.name) {
found = true;
cartItem.productsNumber = this.state.shoppingCart;
return cartItem;
} else {
return cartItem;
}
});
if (!found) {
updateCart.push({
name: this.props.name,
productsNumber: this.state.shoppingCart,
key: this.props.name
});
}
this.setState({
cart: updateCart
});
// return <ShoppingCart cart={updateCart} />;
// console.log(updateCart);
};
render() {
const cart = this.state.cart.map(cartItem => (
<ShoppingCart
name={cartItem.name}
productsNumber={cartItem.productsNumber}
key={cartItem.key}
/>
));
return (
<>
<div className="counter">
<button
className="buttonCount"
disabled={this.state.shoppingCart === 0 ? true : false}
onClick={this.handleRemoveFromCart}
>-</button>
<span> {this.state.shoppingCart} </span>
<button
className="buttonCount"
disabled={
this.state.shoppingCart === this.state.availableProducts
? true
: false
}
onClick={this.handleAddToCart}
>
+
</button>
<button
className="buy"
disabled={this.state.shoppingCart <= 0 ? true : false}
onClick={this.handleAddProductsToCart}
>Add to cart</button>
</div>
<div>{cart}</div>
</>
);
}
}
Счетчик экспорта по умолчанию;
и это покупки
import React, {Component} from "react"
import "./ShoppingCart";
import "./ShoppingCart.css";
class ShoppingCart extends Component {
render() {
return (
<>
<div>{this.props.name}</div>
<div>{this.props.productsNumber}</div>
</>
);
}
}
export default ShoppingCart;
Если у вас есть предложения, это будет полезно. Спасибо.