未捕获的类型错误：无法读取未定义的属性答案

【问题标题】：Uncaught TypeError: Cannot read property of undefined未捕获的类型错误：无法读取未定义的属性
【发布时间】：2017-07-26 22:32:50
【问题描述】：

我无法显示数组的状态以便将对象推入其中。 CreateCards 组件在 addCart 函数中返回好的信息。

constructor(){
    super();
    this.state = {
        cards: []
    }
}


addCart(title, qte){
    console.log(title);
    console.log(qte);
    console.log(this.state.cards);
    //let array = this.state.cards;
    //array.push({title: title, qte: qte});
}

render(){
    console.log(this.state.string);
    return (
        <div>
            <div>
                <h2>Panier</h2>

            </div>
            {
                data.map((bike, index)=>{
                    return (
                        <CreateCards key={index} title={bike.title} img={bike.img} price={bike.price} addCart={this.addCart}/>
                    )
                })
            }
        </div>
    )
}

【问题讨论】：

您忘记将addCart 绑定到组件。在构造函数中添加this.addCart = this.addCart.bind(this)，它应该可以工作。
data.map 对我来说毫无意义，因为您没有在此代码的任何地方声明变量 data。那是一个全局变量吗？
数据在我的文件开头导入（从'data.js'导入数据）

标签： reactjs

【解决方案1】：

您还应该使用 const newCards = this.state.cards.push({title: title, qte: qte}); this.setState({ cards: newCards }); 而不是试图直接改变状态对象。

【讨论】：

^^ 这也会直接改变状态对象，因为您正在使用推送。您应该使用 concat 代替它返回一个新数组。 Push 还返回数组的长度，因此在您的示例中 newCards 实际上等于一个数字而不是数组。

【解决方案2】：

你的 addCart 函数应该是这样的

addCart(title, qte){
   console.log(title);
   console.log(qte);
   const array = this.state.cards.concat({title: title, qte: qte})
   this.setState({cards: array})
}

Push 方法会改变状态，所以使用 concat 代替它。它返回一个新数组。

【讨论】：