Uncaught TypeError：未定義のプロパティを読み取ることができません

Question

オブジェクトをプッシュするために配列の状態を表示できません。 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> 
    ) 
} 

Answer 1

また、直接、状態オブジェクトを変異しようとしているのではなく、 const newCards = this.state.cards.push({title: title, qte: qte}); this.setState({ cards: newCards }); を使用する必要があります。

Answer 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メソッドは、状態を変異させるので、代わりの連結を使用します。新しい配列を返します。