我有一个容器,它可以访问Redux状态,并将该状态的某些部分映射到它的道具,我感兴趣的部分是'coins‘,所以
this.props.coins
使用console.log(),我可以看到在呈现容器时,我可以访问这段状态。
该容器包含一个组件,该组件接收回调函数和前面提到的状态块coins,该组件通过
onClickHandler() && coinData
容器有一个处理回调的函数,名为
_handleClick()
在这个函数中,由于某种原因,this.props不能访问我在render函数中能够访问的硬币,但可以访问我传递给组件的道具,我认为这些道具应该属于组件。因此,我可以从容器中的_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;
发布于 2018-06-03 02:51:21
当@MukulSharma评论“use var self = this in your function”时,我想尝试在容器的构造函数中绑定_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() { ...
https://stackoverflow.com/questions/50659239
复制相似问题