反応状態の配列に新しいオブジェクトを値として追加する方法

Question

反応状態内の配列に新しい値を追加したいのですが、途中でエラーが発生しました。溶液？

class App extends Component { 
     constructor(props) { 
     super(props); 
     this.state = { 
      Items: [ 
      {w:1, b:8, name: 'banana'}, 
      {w:7, b:3, name:'apple'}, 
      {w:3, b:5, name:'kiwi'}, 
      {w:6, b:3, name:'strawberry'}, 
      {w:5, b:1, name:'orange'}] 
     }; 
     } 

    addItem(weight, benefit, itemName){ 
     this.setState(prevState => ({ 
     Items: [...prevState.Items, {w:weight, b:benefit, name: itemName}] 
     })) 
    } 

Answer 1

あなたは「この」エラーなしで使用するためにはaddItem機能をバインドする必要があります。

2通りの方法があります。

1 /字句の結合：（ "=>" を使用して）

addItem = (weight, benefit, itemName) => { 
    this.setState(prevState => ({ 
    Items: [...prevState.Items, {w:weight, b:benefit, name: itemName}] 
    })) 
} 

は、コンストラクタにバインド

2 /：動作しているようです何のエラー、

constructor(props) { 
    super(props); 
    this.state = { 
     Items: [ 
     {w:1, b:8, name: 'banana'}, 
     {w:7, b:3, name:'apple'}, 
     {w:3, b:5, name:'kiwi'}, 
     {w:6, b:3, name:'strawberry'}, 
     {w:5, b:1, name:'orange'}] 
    }; 
    this.addItem = this.addItem.bind(this); 
    }