Как решить React и Redux бросок Не удается прочитать свойство 'props' неопределенной ошибки?

Question

Я новичок в редуксе с промежуточным опытом в React.У меня есть два компонента ButtonAppBar и CriticalIssues.Я пытаюсь раскрыть компонент CriticalIssues по нажатию кнопки в ButtonAppBar.ButtonAppBar выбрасывает Cannot read свойства 'props' undefined при нажатии кнопки.Я застрял на этом в течение длительного времени, любая помощь будет оценена.

Мой код:

ButtonAppBar.js

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import styled from 'styled-components'
import CriticalIssues from '../CriticalIssues'

import { showCriticalBugs } from 'containers/App/actions';
import { connect } from 'react-redux';
import { show_critical } from '../../containers/App/sagas';

const styles = {
    root: {
        flexGrow: 1,
    },
    grow: {
        flexGrow: 1,
        textAlign: "left"
    },
    menuButton: {
        marginLeft: -12,
        marginRight: 20,
    },
};

const Button = styled.button`
background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
border-radius: 3px;
border: 0;
color: white;
height: 48px;
padding: 0 30px;
box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3);
`

export class ButtonAppBar extends React.Component {
    
    constructor(props) {
        super(props);
    }

    componentDidMount(){
        this.showCritical();
    }

    showCritical(){
        this.props.dispatch(showCriticalBugs());
    }

    render() {
        return (
            <div>
                <AppBar position="static">
                    <Toolbar>

                        <Typography variant="h6" color="inherit">
                            Regression 360
                         </Typography>
                        <Button onClick={this.showCritical} color="inherit">Predict Critical Bugs</Button>
                    </Toolbar>
                </AppBar>
            </div>
        );
    };
}
ButtonAppBar.propTypes = {
    dispatch: PropTypes.func,
  };

export default connect()(ButtonAppBar);

sagas.js

import {showCriticalBugs} from './actions'
import { call, cancel, select, take, takeLatest, put } from 'redux-saga/effects';

export function* show_critical (){
    yield put(showCriticalBugs());
}

actions.js

export const SHOW_CRITICAL = 'SHOW_CRITICAL';

export function showCriticalBugs() {
    return {
      type: SHOW_CRITICAL,
    };
  }

reducer.js

import SHOW_CRITICAL from './actions'

const initialState = fromJS({
    visible: false
  });
  

  function appReducer(state = initialState, action) {
    switch (action.type) {
      case SHOW_CRITICAL:
        console.log("m here");
        return state.set('visible', true);
    }
}
    

export default appReducer;

CriticalIssue.js

import React from 'react';
import PropTypes from 'prop-types'
import { connect } from 'react-redux';
import { Card, Typography, Button } from '@material-ui/core'


var mainDiv = {
  padding: 10,
  width: "auto",
  fontFamily: "monospace",
  textAlign: "center"
};


class CriticalIssues extends React.Component {
  componentDidMount(){
    console.log(this.props.visible)
  }
  render() {
    if (this.props.visible) {
      return (
        <Card>
          <div style={mainDiv}>
            <Typography variant={'h1'} color={"error"}>3</Typography>
            <Typography component={"h3"}>Critical Issues</Typography>
          </div>
        </Card>
      );
    }
    else return (null);
  }
}

function mapStateToProps(state) {
  return {
    visible: state.getIn(['global', 'visible']),
  };
}

export default connect(mapStateToProps)(CriticalIssues);

Answer 1

Вы должны привязать свою функцию для доступа к ключевому слову "this" в вашем методе, вы можете использовать это

<Button onClick={this.showCritical.bind(this)} color="inherit">Predict Critical Bugs</Button>

, или вы также можете привязать свои методы в конструкторе, как показано ниже

constructor(props){
  super(props)
  this.showCritical = this.showCritical.bind(this)
}