web-dev-qa-db-ja.com

React withRouterおよびwithStylesエラーのエクスポート

私はコンポーネントを作るためにreduxとmaterial-uiとともにreactを使用しています。エクスポートステートメントexport default connect()(withRouter(FirstPage))(withStyles(styles)(FirstPage))を記述しようとしています

しかし、これはうまくいかないようです

TypeError: Cannot set property 'props' of undefined

this.props = props;

このエラーは、node_modulesの1つを参照しています。

完全なコードは次のとおりです。

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

次のコードが機能するはずです。

_export default withRouter(connect()(withStyles(styles)(FirstPage)))
_

の代わりに

_export default connect()(withRouter(FirstPage))(withStyles(styles)(FirstPage))
_

まず、connect()は引数のみを受け入れる関数を返します。第二に、connect()をwithRouter()で囲む必要があります。この問題は React Router のgithubドキュメントに記載されています。

19
Brian Le