[解決済み】React Propsが定義されていません。

質問

props.updateBuildingがなぜ動作しないのか、理解に苦しんでいます。

以下は、propがrenderメソッド内にある場合に動作します。

class Buildings extends Component {
  constructor(props) {
      super(props);
  }

  componentWillMount() {
    this.props.fetchBuildings();
  }

  renderBuildings(building) {
    return (
      <div>
          <p> {building.name}</p>
      </div>
    );
  }


  render() {
    return (
      <div> 
        {this.props.buildings.map(this.renderBuildings)}
        <button type="button" className="btn btn-success" onClick={this.props.updateBuilding.bind(this, 1)}>Edit</button>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return { buildings: state.buildings.all };
}
function mapDispatchToProps(dispatch){
  return bindActionCreators({ fetchBuildings, updateBuilding}, dispatch);
}

しかし this.props.updateBuilding をrenderBuildingsメソッドに渡すと、以下のようになります。

  renderBuildings(building) {
    return (
      <div>
          <p> {building.name}</p>
          <button type="button" className="btn btn-success" onClick={this.props.updateBuilding.bind(this, building.id)}>Edit</button>
      </div>
    );
  }

エラーが出ます。

Cannot read property 'props' of undefined

どうやら、プロップが updateBuildings が、renderBuildingsメソッド内にあると読み込めないのですが、何が原因なのかわかりません。

解決方法は？

このエラーは読み間違えです。 props が未定義なのではなく props は未定義であり、これは this キーワードを使用することで、手動で map 関数のコンテキストを設定することができます。

this.props.buildings.map(this.renderBuildings, this)

またはインラインでバインドする

this.props.buildings.map(this.renderBuildings.bind(this))