Реакция экспорта с ошибкой Router и withStyles

Question

Я использую реагирую вместе с избыточным и материальным интерфейсом, чтобы сделать компонент. Я пытаюсь написать заявление об экспорте export default connect()(withRouter(FirstPage))(withStyles(styles)(FirstPage))

Однако, похоже, это не работает. Я получаю сообщение об ошибке

TypeError: Cannot set property 'props' of undefined

this.props = props;

Эта ошибка ссылается на один из моих узлов node_modules.

Вот мой полный код:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import {withRouter} from 'react-router-dom'
import { withStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';

const styles = theme =>({
    root: {
        maxWidth: 345,
    },

})
class FirstPage extends Component {
    state = {
        feeling: ''
    }

    //This function will dispatch the users response to index.js
    //The dispatch type here is 'SET_FEELING'
    submitData=(event) => {
        event.preventDefault();
        this.props.dispatch({type: 'SET_FEELING', payload: this.state})
        this.changeLocation();
    }

    //This function will update the local state with the users response
    handleChange= (event) => {
        this.setState({
            feeling: event.target.value
        })
    }

    //This function will change the current url when a button is clicked
    changeLocation= ()=> {
        this.props.history.push('/secondPage')
    }

    render(){
        const { classes } = this.props;

        return(
            <div>
                <Card >
                    <CardContent className={classes.root}>

                        <form>
                        <input onChange={this.handleChange} placeholder='How are you feeling' value={this.state.feeling} />
                        </form>
                    </CardContent>
                    <CardActions>
                        <Button onClick={this.submitData}>Submit</Button>
                    </CardActions>
                </Card>
            </div>
        )
    }
}

//this export connects the component to the reduxStore as well as allowing us to use the history props
export default connect()(withRouter(FirstPage))(withStyles(styles)(FirstPage))

Answer 1

Я считаю, что следующий код должен работать:

export default withRouter(connect()(withStyles(styles)(FirstPage)))

Вместо

export default connect()(withRouter(FirstPage))(withStyles(styles)(FirstPage))

Прежде всего, connect() возвращает функцию, которая принимает только аргумент. Во-вторых, connect() следует обернуть внутри withRouter(). Эта проблема указана в github документах React Router .