React JS this.stateが定義されていません：未定義のプロパティ 'components'を読み込めません。コンポーネントは "Board"コンポーネントの状態です

Question

私はコンポーネントの作成、削除、編集を行うReactアプリケーションを作成しています。正確にテキストを変更する）。私は 'MyComponent'と呼ばれる基本コンポーネントと、 'Board'の状態である 'components'という配列に作成された 'MyComponent'をすべて含む 'Board'コンポーネントを持っています。新しいコンポーネントの削除と追加は完全に機能します。

編集後の考え方は、ユーザーが[編集]ボタンをクリックすると「編集中」の状態がtrueに変わり、テキストエリアが表示され、ユーザーが新しいテキストを入力できるようになり、 「編集中」の状態はfalseに戻り、その名前を持つdivのビューに戻ります。 （名前も更新する必要があります）。

エラー名： 未キャッチTypeError：未定義のプロパティ 'components'を読み取ることができません。コードへ

リンク：私は知らない理由https://github.com/AndreiEneCristian/ReactComponents/blob/master/EventHandl2.html

、私は、このようにそのテキストを変更し、「MyComponentの」でrenderNormal機能に戻って、編集したコンポーネントを保存しようとするたびに、ブラウザが提供します私はエラー "未定義のプロパティ 'コンポーネント（これは状態です）を読むことができません"。私はデバッグの理由から、いくつかの行を出力しようとしましたが、データが正しく処理されます（ 'MyComponent'の状態が正常にfalseに変更され、newTextがnewText変数に保存されます）。状態 "は未定義です。

コンソールエラーにより、この行に「var arr = this.state.components;」というメッセージが表示されます。関数内：

updateComponent: function(newText, i) { 
     console.log(this.state); 
     var arr = this.state.components; 
     arr[i] = newText; 
     this.setState({components: arr}); 
     }, 

注：this.stateは定義されていません。すべての背後にある問題です。これをどうすれば解決できますか？あなたは機能をバインドする必要が

Answer 1

あなたに小道具

<MyComponent key={i} index={i} updateComponentText={this.updateComponent.bind(this)} deleteFromBoard={this.removeComponent}> 
    {text} 
</MyComponent>);