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

ERROR：

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

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

通过这种方法，您将不得不将道具从共同的祖先传递到正确的组件。所以最好的方法是使用Redux

Answer 2

有快速而肮脏的方法可以做到这一点，但它们对你没有任何帮助。正确的方法是使用redux，在redux store中定义cart对象（而不是组件）。

然后，Cart和Products这两个组件都将使用此商店。

产品的onPress将触发将此产品添加到购物车的操作。购物车组件将访问购物车以显示其内容。

这是解决问题的正确方法（不是唯一正确的方法）。它还将为您提供复杂的项目。

快速而肮脏的方式是把它放在窗口中。请参阅：Global variable for react

Answer 3

你可以尝试这样的事情：

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

另外，＆＃34;你可能不需要Redux＆＃34;大多数时候，请查看这两篇惊人的文章：

https://medium.com/@blairanderson/you-probably-dont-need-redux-1b404204a07f https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367

我想改变一个类中的静态数组，从另一个类本身做出反应

3 个答案: