Я хочу внести изменения в статический массив в одном классе из другого реагировать на родной
Я пытаюсь добавить продукт из моего компонента PRODUCT в статический массив в компоненте CART, но я продолжаю получать сообщение об ошибке фрагмент из компонента CART
export default class Cart extends Component{
static products=[];
.....
фрагмент из компонента PRODUCT
<Button style = {{flex:1, height:30, alignContent:'center', backgroundColor:'#8ab465'}}
onPress = {()=>{
Cart.Products.push({
name:this.props.productName,
price:this.props.productPrice,
})
}}
ОШИБКА:
undefined is not an object (evaluating '_cart.Cart.Products')
onPress
......
как я могу внести изменения в массив непосредственно из компонента продукта
В вашем компоненте продукта Products - это прописные буквы, но в вашем компоненте Cart - строчные ... При этом я бы не рекомендовал решать это таким образом, поскольку это своего рода противоречие парадигме React.
да, я изменил имя, но все равно ошибка @ ken4z
Я обнаружил, что лучшее решение - использовать AsyncStorage для хранения моего массива и загрузки его в соответствующем месте.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Есть быстрые и грязные способы сделать это, но они не принесут вам никакой пользы. Правильный способ - использовать redux, определить объект корзины (не компонент) в магазине redux.
Тогда оба компонента, Корзина и Товары будут использовать этот магазин.
onPress продукта запустит действие, которое добавит этот продукт в корзину. Компонент "Корзина" получит доступ к корзине для отображения ее содержимого.
Это правильный (не единственный) способ решить вашу проблему. Он также пригодится вам в сложных проектах.
Быстрым и грязным способом будет поставить его в окно. См .: Глобальная переменная для реакции
спасибо @Rahamin, но у меня мало времени, и я вообще не использовал redux в своем проекте, если есть другой способ использовать его, просто используя react-native
вы можете попробовать что-то вроде этого:
class Cart extends Component {
products = [];
handleSubmit = (name, price) => {
const newItem = {
name,
price,
};
this.products.push(newItem)
};
render() {
return(
<div>
<button onClick = {() => this.handleSubmit('productName', 120)}>Button</button>
</div>
)
}
}
Кроме того, если в большинстве случаев «вам, вероятно, не нужен Redux», ознакомьтесь с этими двумя замечательными статьями:
https://medium.com/@blairanderson/you-probably-dont-need-redux-1b404204a07fhttps://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367
Спасибо @Vlad Логика моего приложения состоит в том, чтобы добавить кучу продуктов в корзину и отправить массив в качестве заказа, поэтому мне нужно очистить массив и начать в следующем порядке
Предполагая, что вы не используете redux, лучший способ сделать это -
в общем предке обоих компонентов создают состояние { products: [] } и обработчик для добавления продукта в это состояние.
export default class Ancestor extends Component {
constructor() {
this.state = {
products: []
}
}
onAddProduct = (product) => {
// make sure you do not mutate the state else your component
// will not update
this.setState({ products: [this.state.products, product] })
}
render() {
return (
<div>
<Cart products = {this.props.products}/>
<Product onAdd = {this.onAddProduct}/>
</div>
)
}
}
теперь в компоненте продукта вы можете использовать
export default class Product extends Component {
render() {
return (
<Button
onPress = {() => this.props.onAdd({
name: this.props.productName,
price: this.props.productPrice
})}
/>
)
}
}
таким образом ваш компонент корзины будет повторно отображен с правильными продуктами, когда вы добавите новый продукт
При таком подходе вам придется передавать свойства от общего предка к правильным компонентам. Итак, лучший подход - использовать Redux.
Спасибо @Elroy, я попробую ваше решение, в будущем я перейду на redux
Вы используете TypeScript?