Javascript 我想从另一个类更改一个类中的静态数组

我试图将我的组件产品中的产品添加到购物车组件中的静态数组中，但我一直收到一个错误 来自购物车组件的代码段

export default class Cart extends Component{

    static products=[];
.....

<Button style={{flex:1, height:30, alignContent:'center', backgroundColor:'#8ab465'}} 
                        onPress={()=>{
                            Cart.Products.push({
                                name:this.props.productName,
                                price:this.props.productPrice,
                            })
                        }}

来自产品组件的代码片段

export default class Cart extends Component{

    static products=[];
.....

<Button style={{flex:1, height:30, alignContent:'center', backgroundColor:'#8ab465'}} 
                        onPress={()=>{
                            Cart.Products.push({
                                name:this.props.productName,
                                price:this.props.productPrice,
                            })
                        }}

---

如何直接从产品组件对阵列进行更改有一些快速而肮脏的方法，但它们对您没有任何好处。正确的方法是使用redux，在redux商店中定义购物车对象（而不是组件）

export default class Cart extends Component{

    static products=[];
.....

<Button style={{flex:1, height:30, alignContent:'center', backgroundColor:'#8ab465'}} 
                        onPress={()=>{
                            Cart.Products.push({
                                name:this.props.productName,
                                price:this.props.productPrice,
                            })
                        }}

然后，组件、购物车和产品都将使用此商店

按下产品将启动一个操作，将此产品添加到购物车。购物车组件将访问购物车以显示其内容

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

---

一个快速而肮脏的方法就是把它放在窗户里。请参阅：

您可以尝试以下方法：

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

类购物车扩展组件{
产品=[]；
handleSubmit=（名称、价格）=>{
常量newItem={
名称
价格，
};
this.products.push（newItem）
};
render（）{
返回(
此.handleSubmit（'productName'，120）}>按钮
)
}
}

此外，“您可能不需要Redux”大多数时候，请查看以下两篇精彩文章：

---

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

导出默认类扩展组件{
构造函数（）{
此.state={
产品：[]
}
}
onAddProduct=（产品）=>{
//确保不要改变组件的其他状态
//不会更新
this.setState（{products:[this.state.products，product]}）
}
render（）{
返回(
)
}
}

现在在您的产品组件中，您可以使用

export default class Product extends Component {
  render() {
    return (
      <Button 
        onPress={() => this.props.onAdd({
          name: this.props.productName,
          price: this.props.productPrice
        })}
      />
    )
  }
}

导出默认类产品扩展组件{
render（）{
返回(
这是道具({
名称：this.props.productName，
价格：this.props.productPrice
})}
/>
)
}
}

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

---

使用这种方法，您必须不断地将支柱从公共祖先传递到正确的组件。因此，最好的方法是使用

Redux

是否使用TypeScript？在产品组件中

Products

是大写的，但在购物车组件中是小写的。。。也就是说，我不建议用这种方式解决它，因为它与React范例有点相反。是的，我更改了名称，但仍然存在相同的错误@ken4zI发现最好的解决方案是使用

AsyncStorage

存储我的阵列并加载它，在适当的地方谢谢@Rahamin，但我时间很短，在我的项目中根本没有使用redux如果有其他方法，我可以使用react-nativeThanks@Elroy，我会尝试你的解决方案，在未来，我将改为ReduxThank@Vlad。我的应用程序背后的逻辑是将一堆产品添加到购物车中，并将阵列作为订单提交，因此我需要清理阵列并在下一个订单中重新开始