Javascript 使用redux访问react组件中的this.props时未定义

我遇到了以下问题，我在React中创建了一个组件，我主要尝试使用

this.props.dispatch（）

方法。然而，当我试图在我创建的函数中引用this.props时，我在控制台中得到一个错误，如下所示

未捕获的TypeError:无法读取未定义的属性“dispatch”

问题：为什么不能在我自己添加的函数中使用

this.props

，例如

handleResize（）

当

this.props可用于默认的react函数，例如
componentWillMount（），componentDidMount（），

这是导致上述错误的函数

handleResize() {
        console.log( "handle function getting called" );
        this.props.dispatch( changeListHeight( window.innerHeight ) );
    }

这是我的全部反应组件

import React, {Component} from 'react';
import Avatar from 'material-ui/Avatar';
import List from 'material-ui/List/List';
import ListItem from 'material-ui/List/ListItem';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { connect } from "react-redux";
import { fetchMessages } from '../actions/messageActions';
import { changeListHeight } from '../actions/appActions';


import {
    blue300,
    indigo900,
    orange200,
    deepOrange300,
    pink400,
    purple500,
} from 'material-ui/styles/colors';

@connect((store) => {
    return {
        messages: store.messages.messages,
        app: store.app
    };
})
class Items extends Component {

    constructor(props) {
        super(props);
        this.props.dispatch( changeListHeight( window.innerHeight ) );
    }

    componentWillMount() {
        this.props.dispatch( fetchMessages() );
    }

    componentDidMount() {
        console.log( this.props );
        window.addEventListener('resize', this.handleResize ); //event to handle resizing the message list
        this.refs.chatList.onscroll = function() { this.handleScroll }; //event to keep the freshest messages in view
    }

    handleResize() {
        console.log( "handle function getting called" );
        this.props.dispatch( changeListHeight( window.innerHeight ) );
    }

    handleScroll() {
        console.log( "handle function getting called" );
        //console.log(this.refs.chatList);
        //let isScrolledToBottom = this.chatList.scrollHeight - this.chatList.clientHeight <= this.chatList.scrollTop + 1;
    }

    render() {

        let listStyle = {
            height: (this.props.app.chatListHeight - (35 + 64 + 8 + 135)),
            overflowY: "auto"
        }

        let listItemStyle = {
            margin: 5,
        };

        return (
             <MuiThemeProvider>
                <List className="chat-list" style={listStyle} ref="chatList">
                    {this.props.messages.map(function(message){
                        return <ListItem
                            key={message.id}
                            disabled={true}
                            leftAvatar={
                                <Avatar
                                    color={deepOrange300}
                                    backgroundColor={purple500}
                                    size={30}
                                    style={listItemStyle}
                                >
                                {message.name.charAt(0)}
                                </Avatar>
                            }>
                            {message.msg}
                        </ListItem>;
                    })}
                </List>
             </MuiThemeProvider>
        );
    }
}

export default Items;

import React，{Component}来自'React'；
从“材质ui/化身”导入化身；
从“物料界面/列表/列表”导入列表；
从“物料界面/列表/列表项”导入列表项；
从“材质ui/styles/MuiThemeProvider”导入MuiThemeProvider；
从“react redux”导入{connect}；
从“../actions/messageActions”导入{fetchMessages}；
从“../actions/appActions”导入{changeListHeight}；
进口{
蓝色300，
靛蓝900，
橙色200，
深橙300，
pink400，
紫色500，
}来自“材质ui/样式/颜色”；
@连接（（存储）=>{
返回{
消息：store.messages.messages，
app:store.app
};
})
类项扩展组件{
建造师（道具）{
超级（道具）；
this.props.dispatch（changeListHeight（window.innerHeight））；
}
组件willmount（）{
this.props.dispatch（fetchMessages（））；
}
componentDidMount（）{
console.log（this.props）；
window.addEventListener（'resize'，this.handleResize）；//处理调整消息列表大小的事件
this.refs.chatList.onscroll=function（）{this.handleScroll}；//事件以保持查看最新消息
}
handleResize（）{
log（“调用句柄函数”）；
this.props.dispatch（changeListHeight（window.innerHeight））；
}
handleScroll（）{
log（“调用句柄函数”）；
//console.log（this.refs.chatList）；
//让IsCrolledTobottom=this.chatList.scrollHeight-this.chatList.clientHeight您调用的
this.handleResize
上下文错误

替换：

window.addEventListener('resize', this.handleResize );

至

window.addEventListener('resize', this.handleResize.bind(this) );

或者在
构造函数中绑定此函数

this.handleResize = this.handleResize.bind(this)

您正在使用错误的上下文调用this.handleResize

替换：

window.addEventListener('resize', this.handleResize );

至

window.addEventListener('resize', this.handleResize.bind(this) );

或者在
构造函数中绑定此函数

this.handleResize = this.handleResize.bind(this)

只需像这样修改构造函数-

constructor(props) {
    super(props);
    this.handleResize = this.handleResize.bind(this);
}

只需像这样修改构造函数-

constructor(props) {
    super(props);
    this.handleResize = this.handleResize.bind(this);
}

你可以在中阅读更多你可以在中阅读更多