web-dev-qa-db-fra.com

React exportation avec une erreur de routeur et de styles

J'utilise react avec redux et material-ui pour créer un composant. J'essaie d'écrire une instruction d'exportation export default connect()(withRouter(FirstPage))(withStyles(styles)(FirstPage))

Cependant, cela ne semble pas fonctionner, j'obtiens une erreur qui dit

TypeError: Cannot set property 'props' of undefined

this.props = props;

Cette erreur fait référence à l'un de mes modules node_modules.

Voici mon code complet:

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))
reactjsreduxmaterial-ui
8
tdammon

Je pense que le code suivant devrait fonctionner:

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

Au lieu de

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

Tout d'abord, connect() renvoie une fonction qui n'accepte qu'un argument. Deuxièmement, connect() doit être enveloppé dans withRouter(). Ce problème est indiqué dans les documents github de React Router .

19
Brian Le