React：バインドされたメソッドを状態内の配列内の要素に結び付ける方法

Question

Iveはこれを行う方法を理解するために過去20時間を費やしたので、助言をいただければ幸いです。

私がしようとしているのは、プレゼンテーションコンポーネントです。上位コンポーネントから渡されたメソッドを呼び出し、そのメソッドは上位コンテナで処理される状態を変更します。

私より高次のコンテナは、次のようになります

export default class TodayContainer extends Component { 
    constructor(props) { 
    super(props); 

    this.state = {goalItems: [{id: 1, goal: "Pet the dog"}, {id: 2, 
    goal: "feed the cat"}, {id: 3, goal: "other good stuff"}]}; 

    this.goalSave = this.goalSave.bind(this); 

    } 

    goalSave(goal) { 
    let stateCopy = Object.assign({}, this.state); 
    stateCopy.goalItems[key].goal = goal; 
    this.setState(stateCopy); } 

render() { 
    return (
     <Today goalItems={this.state.goalItems} 
      goalSave={this.goalSave}/> 
    )}} 

問題は、私はまだのための幸せな（正しい配列値をマッピングする方法を考え出したていないこと、[キー]でgoalSave方法であっありますアドバイスもありますが）、私は正しくデバッグすることができませんでした。

My Propsはいくつかのプレゼンテーション用のコンテナを通過します。私が最初に何かをしている場所です。

CreateGoalItems() { 
    const goalObjects = this.props.goalItems; 
    if(goalObjects === undefined) { 
     return <div>Loading...</div> 
    } 

    let test = []; 
    Object.keys(goalObjects).forEach(function(key) { 

    test.push(<GoalItem key={goalObjects[key].id} 
     goal={goalObjects[key].goal} 
     goalSave={this.props.goalSave} />) //**Doesn't Work *** 
    }); 
    return test; 
    } 

上記の説明では、私は正しく目標を下げることができましたが、どのようにしてメソッドを渡すのか分かりません。配列ではなく状態のオブジェクトが1つしかないときは、問題はありませんでしたが、配列では、そのメソッドをGoalItemコンポーネントの特定のインスタンスにバインドする方法がわかりません。私は "this.props.goalSave関数ではありません"エラーを取得します。

注：私は、私はかなり迷ってしまいました

doNothing() { 
    console.log("This did nothing"); 
} 

のような機能をダウン渡す場合、同じエラーが発生します。助けをありがとうございました。

Answer 1

関数のリファレンスをpropsから渡す前に保存してみましたか？

CreateGoalItems() { 
    const goalObjects = this.props.goalItems; 
    const goalSave = this.props.goalSave;  
    if(goalObjects === undefined) { 
     return <div>Loading...</div> 
    } 

    let test = []; 
    Object.keys(goalObjects).forEach(function(key) { 
     test.push(<GoalItem key={goalObjects[key].id} 
     goal={goalObjects[key].goal} 
     goalSave={goalSave} />) 
    }); 
    return test; 
}