Reactjs 反应容器'；s道具更改导致未捕获的TypeError:无法读取未定义的属性

我有一个容器，可以访问Redux状态，并将该状态的某些部分映射到它的道具，我感兴趣的部分是“硬币”，所以

这是道具和硬币

使用console.log（）可以看出，在呈现容器时，我可以访问该状态

这个容器包含一个组件，该组件通过其自身的道具接收回调函数和前面提到的状态coins

onClickHandler（）&&coinData

容器有一个函数来处理调用的回调

_handleClick（）

在这个函数中，出于某种原因，this.props不能访问我在渲染函数中能够访问的相同硬币，但可以访问我传递给组件的道具，我认为这些道具应该属于组件。因此，我可以访问容器中的_handleClick（）

this.props.onClickHandler（）&this.props.coinData

但不是

这是道具和硬币

这就是我希望从容器中的任何位置都可以访问的内容。当我试图访问回调处理程序_handleClick（）中的this.props.coins时，我在帖子标题中出现错误，但为什么会出现这种情况，为什么我可以访问应该属于相应子组件的props？有没有办法从_handleClick（）调用访问this.props.coins

我的容器：

import React, { Component } from 'react';
import '../App.css';
import { connect } from "react-redux";
import ChartSelectMenu from '../components/ChartSelectMenu';
import { selectCoinForChart } from '../actions/index';

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

  _handleClick(ticker) {
    //event.preventDefault();
    console.log("Clicked: ", ticker);
    console.log("coin_list: ", this.props);

    const coin_list = this.props.coins;
    //
    for (let i=0; i<coin_list.length; i++) {
      if (coin_list[i].ticker === ticker) {
        this.props.dispatch(selectCoinForChart(ticker));
      }
    }
  }

  render() {
    console.log("Container props on render(): ", this.props);
      return (
        <ChartSelectMenu
        onClickHandler={this._handleClick}
        coinData={this.props.coins}
        />
      );
  }
}

function mapStateToProps({ auth, coins, selectedCoin }) {
  return { auth, coins, selectedCoin };
}

export default connect(mapStateToProps)(ChartSelectMenuContainer);

import React，{Component}来自'React'；
导入“../App.css”；
从“react redux”导入{connect}；
从“../components/ChartSelectMenu”导入ChartSelectMenu；
从“../actions/index”导入{selectCoinForChart}；
类ChartSelectMenuContainer扩展组件{
建造师（道具）{
超级（道具）；
}
_handleClick（股票代码）{
//event.preventDefault（）；
console.log（“单击：”，ticker）；
log（“coin_list:，this.props”）；
const coin_list=this.props.coins；
//
对于（让i=0；i当@MukulSharma评论“在函数内部使用var self=this”时，我想尝试在容器的构造函数中绑定_handleClick函数，结果成功了

解决方案：

import React, { Component } from 'react';
import '../App.css';
import { connect } from "react-redux";
import ChartSelectMenu from '../components/ChartSelectMenu';
import { selectCoinForChart } from '../actions/index';


class ChartSelectMenuContainer extends Component {
  constructor(props) {
    super(props);

    this._handleClick = this._handleClick.bind(this);
  }

  _handleClick(ticker) {
    //event.preventDefault();
    console.log("Clicked: ", ticker);
    console.log("coin_list: ", this.props);

    const coin_list = this.props.coins;
    //
    for (let i=0; i<coin_list.length; i++) {
      if (coin_list[i].ticker === ticker) {
        this.props.dispatch(selectCoinForChart(ticker));
      }
    }
  }

  render() { ...

import React，{Component}来自'React'；
导入“../App.css”；
从“react redux”导入{connect}；
从“../components/ChartSelectMenu”导入ChartSelectMenu；
从“../actions/index”导入{selectCoinForChart}；
类ChartSelectMenuContainer扩展组件{
建造师（道具）{
超级（道具）；
this.\u handleClick=this.\u handleClick.bind（this）；
}
_handleClick（股票代码）{
//event.preventDefault（）；
console.log（“单击：”，ticker）；
log（“coin_list:，this.props”）；
const coin_list=this.props.coins；
//
对于（让i=0；iMake handle作为箭头函数单击..或在函数中使用var self=this
import React, { Component } from 'react';
import '../App.css';
import { connect } from "react-redux";
import ChartSelectMenu from '../components/ChartSelectMenu';
import { selectCoinForChart } from '../actions/index';


class ChartSelectMenuContainer extends Component {
  constructor(props) {
    super(props);

    this._handleClick = this._handleClick.bind(this);
  }

  _handleClick(ticker) {
    //event.preventDefault();
    console.log("Clicked: ", ticker);
    console.log("coin_list: ", this.props);

    const coin_list = this.props.coins;
    //
    for (let i=0; i<coin_list.length; i++) {
      if (coin_list[i].ticker === ticker) {
        this.props.dispatch(selectCoinForChart(ticker));
      }
    }
  }

  render() { ...