React容器的属性更改导致未捕获TypeError:无法读取未定义的属性
React容器的属性更改导致未捕获TypeError:无法读取未定义的属性
提问于 2018-06-03 01:05:59
我有一个容器，它可以访问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;回答 1
Stack Overflow用户
发布于 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() { ...页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50659239
复制相关文章
相似问题