Question

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

this.props.coins

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

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

onClickHandler（）＆amp;＆amp; coinData

容器具有处理名为

的回调的功能

_handleClick（）

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

this.props.onClickHandler（）＆amp;＆amp; 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评论＆＃39;在你的函数中使用var self = this＆＃39;我想尝试在容器的构造函数中绑定_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() { ...

React容器的props更改导致Uncaught TypeError：无法读取未定义

1 个答案: