我想从另一个反应原生的一个类中更改一个静态数组

Posted 2023-02-22

【中文标题】我想从另一个反应原生的一个类中更改一个静态数组

【英文标题】：I wanna make changes to a static array in one class from another react native

【发布时间】：2018-10-11 18:10:57

【问题描述】：

我正在尝试将我的组件 PRODUCT 中的产品添加到 CART 组件中的静态数组中，但我一直收到错误消息 来自 CART 组件的 sn-p

export default class Cart extends Component

    static products=[];
.....

来自 PRODUCT 组件的 sn-p

<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
   ......

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

【问题讨论】：

你在使用 TypeScript 吗？

在您的 Product 组件中 Products 是大写的，但在您的 Cart 组件中是小写的...话虽如此，我不建议以这种方式解决它，因为它有点与 React 背道而驰范式

是的，我改了名字，但还是一样的错误@ken4z

我发现最好的解决方案是使用AsyncStorage 来存储我的数组并在适当的位置加载它

【参考方案1】：

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

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

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

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

一种快速而肮脏的方法是将它放在窗口中。见：Global variable for react

【讨论】：

感谢@Rahamin，但我的时间很短，如果有任何其他方式我可以使用 react-native 来使用它，我根本没有在我的项目中使用 redux

【参考方案2】：

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

【参考方案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>
    )
  

此外，“你可能不需要 Redux”大多数时候，请查看以下两篇令人惊叹的文章：

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

【讨论】：

感谢@Vlad 我的应用程序背后的逻辑是将一堆产品添加到购物车并将数组作为订单提交，所以我需要清理数组并在下一个订单中重新开始