Undefiniert beim Zugriff auf this.props in react Komponente mit Redux

Question

Ich habe das folgende Problem, wo ich eine Komponente in React erstellt habe, wo ich hauptsächlich versuche, die this.props.dispatch() Methode zu verwenden. Wenn ich jedoch versuche, auf this.props in einer Funktion, die ich erstellt habe, zu verweisen, erhalte ich einen Fehler in der Konsole, der folgendes sagt.

Uncaught TypeError: Cannot read property 'dispatch' of undefined

Frage: Warum nicht this.props in einer Funktion, die ich mir selbst verwenden können hinzugefügt z.B. handleResize() wenn this.props für Standard Verfügung reagieren Funktionen wie componentWillMount(), componentDidMount(),

Dies ist die Funktion, die den Fehler verursacht, wie oben erwähnt.

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

Hier ist meine volle reagieren Komponente

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; 

Answer 1

Sie this.handleResize mit falschen Kontext

ersetzen Aufruf:

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

Um

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

Oder binden Sie diese Funktion in constructor

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

Answer 2

einfach Ihre Konstruktor ändern wie this-

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