javascript - 我想从另一个 React Native 更改一个类中的静态数组

Question

我正在尝试将产品从我的组件 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
   ......

我如何直接从产品组件更改数组

Answer 1

假设你没有使用 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
        })}
      />
    )
  }
}

这样，当您添加新产品时，您的购物车组件将重新呈现正确的产品

使用这种方法，您将不得不不断将 props 从共同的祖先向下传递到正确的组件。所以最好的方法是使用 Redux