小编tda*_*mon的帖子

我正在使用react以及redux和material-ui来制作组件。我正在尝试写出口声明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 …

我正在使用一个简单的React Redux应用程序,每次单击一个按钮时,它会递增一个计数器.我正在测试两种不同的方法来增加我的Redux Reducer中的计数器.这两种方法都在改变reducer中的状态,但是其中一种方法并没有导致我的计数器重新渲染.

这是使页面重新渲染的reducer:

const reducer = (state={speed: 0}, action) => {

  if(action.type ==='INCREMENT_SPEED'){
    state = {...state, speed: state.speed+=1 
    }
    return state 
}

这是代码的功能,但不会导致页面以适当的值重新呈现.

const reducer = (state={speed: 0}, action) => {

      if(action.type ==='INCREMENT_SPEED'){
        state.speed++ 
    }
    return state 
}

唯一的区别是我更新状态的方式.我的猜测是使用++增量器实际上是在改变状态,这不会被视为一种变化,因此不会导致页面呈现.

如果它有帮助,那么是附加到DOM的代码的一部分:

render() {
    return (
      <div>

        <p>SPEED: {this.props.reduxState.reducer.speed}</p>

      </div>
    )
  }
}