React 容器的 props 更改导致 Uncaught TypeError: Cannot read property of undefined

Question

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

this.props.coins

使用 console.log() 我可以看到在渲染容器时我可以访问该状态。

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

onClickHandler() && coinData

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

_handleClick()

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

this.props.onClickHandler() && this.props.coinData

但不是

this.props.coins

这是我期望可以从容器内的任何地方访问的内容。当我尝试在回调处理程序 _handleClick() 中访问 this.props.coins 时，帖子标题中出现错误，但为什么会这样，为什么我可以访问应该属于相应子组件的道具？有什么方法可以通过 _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} from 'react';
import Paper from 'material-ui/Paper';
import Menu from 'material-ui/Menu';
import MenuItem from 'material-ui/MenuItem';

const style = {
  display: 'inline-block',
  margin: '16px 0px 16px 0px',
};

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

  _renderMenuItems() {
    if (this.props === null) {
      return <h3>Loading...</h3>;
    } else {
      return(this.props.coinData.map((coin) => {
        return <MenuItem
          key={coin.ticker}
          onClick={this.props.onClickHandler.bind(this, coin.ticker)}
          primaryText={coin.ticker}
        />
      }));
    }
  }
  render() {
    //console.log('ChartSelectMenu props: ', this.props);
    return (
      <div>
        <Paper style={style}>
          <Menu>
            <ul>
              {this._renderMenuItems()}
            </ul>
          </Menu>
        </Paper>
      </div>
    )
  }
}

export default ChartSelectMenu;

Answer 1

当@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() { ...