React Native中从PRODUCT组件向CART静态数组添加商品报错

嘿，我一眼就看到问题出在哪了——你踩了JavaScript大小写敏感的坑！

错误根源 #

你在Cart组件里定义的静态数组是小写的products：

export default class Cart extends Component{ 
  static products=[]; 
  // ...其他代码
}

但在Product组件的按钮点击事件里，你调用的是大写的Products：

Cart.Products.push({ ... })

JavaScript严格区分大小写，Cart.Products是一个未定义的属性，所以才会抛出undefined is not an object的错误。

快速修复 #

先把大小写统一，修改Product组件里的调用代码：

<Button 
  style={{flex:1, height:30, alignContent:'center', backgroundColor:'#8ab465'}} 
  onPress={()=>{ 
    // 改成和定义一致的小写products
    Cart.products.push({ 
      name:this.props.productName, 
      price:this.props.productPrice, 
    }) 
  }}
/>

额外提醒：静态数组无法触发组件重渲染 #

虽然上面的修改能解决报错，但你很快会发现新问题：往静态数组里添加商品后，Cart组件的界面不会更新。因为静态属性不属于React组件的状态（state），React不会监听它的变化，自然不会触发重渲染。

更专业的做法是用React的状态管理来处理购物车数据，比如把购物车状态提升到父组件：

• 第一步：在父组件维护购物车状态和添加方法

  class App extends Component {
    state = {
      cartItems: []
    }
  
    addToCart = (product) => {
      // 用setState更新状态，触发组件重渲染
      this.setState(prevState => ({
        cartItems: [...prevState.cartItems, product]
      }))
    }
  
    render() {
      return (
        <View>
          {/* 把添加方法传给Product组件 */}
          <Product 
            productName="Apple" 
            productPrice="$5" 
            addToCart={this.addToCart} 
          />
          {/* 把购物车数据传给Cart组件 */}
          <Cart cartItems={this.state.cartItems} />
        </View>
      )
    }
  }
  

• 第二步：Product组件调用props里的添加方法

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

• 第三步：Cart组件通过props接收并渲染数据

  export default class Cart extends Component{
    render() {
      return (
        <View>
          {this.props.cartItems.map((item, idx) => (
            <Text key={idx}>{item.name} - {item.price}</Text>
          ))}
        </View>
      )
    }
  }
  

这样既解决了报错问题，又能让购物车数据变化时自动更新界面，完全符合React的设计理念。

内容的提问来源于stack exchange，提问作者Anas Idrissi