Redux容器不知道什么是“ this”

Question

I have been trying to figure out why my container does not know what "this" is.

If I change the container to a component then the it all works correctly.

This Component works perfectly and changes the state when it hits the store

    class testCard extends Component {


       test= (event) => {
           console.log("!!!!!!!!!!!!!!"); // Shows
           this.props.testAction(); // This works
       }

       render(){
       return (
       <Card>
           <CardActionArea onClick={this.test}>
               ... // Card stuff
           </CardActionArea>
           <CardActions>
       </Card>)
       }
   }


   const mapStateToProps = (state) => {
       return {

      }
   }

   const mapDispatchToProps = (dispatch) => {
       return bindActionCreators(
       {
            testAction:   testAction()
        }, dispatch)
   }
   export default connect(mapStateToProps, mapDispatchToProps) (testCard);

Below the code does not know what 'this' is and will throw an error.

   const testCard = (props) => {

    let test= (event) => {
        console.log("!!!!!!!!!!!!!!"); // Shows
        this.props.testAction(); // This errors saying cannot find props of undefined
    }


    return (
    <Card>
        <CardActionArea onClick={test}>
            ... // Card stuff
        </CardActionArea>
        <CardActions>
    </Card>)
  }


  const mapStateToProps = (state) => {
     return {

     }
  }

  const mapDispatchToProps = (dispatch) => {
     return bindActionCreators({
         testAction:  testAction()
     }, dispatch)
   }
   export default connect(mapStateToProps, mapDispatchToProps) (testCard);

Answer 1

In short you have to call props.testAction() in your 2nd example. It uses ES6 arrow function. https://hackernoon.com/javascript-es6-arrow-functions-and-lexical-this-f2a3e2a5e8c4

Also when you use arrow functions for react components you don't need the render() method (render is needed when you use class based component ie extends React.Component, then you need to implement it), all you need in arrow function is to return your result ie jsx data.

https://medium.com/@yassimortensen/container-vs-presentational-components-in-react-8eea956e1cea

Answer 2

A couple of notes.

   class testCard extends React.Component {

    test = (event) => {
        console.log("!!!!!!!!!!!!!!");
        this.props.testAction()
    }

    render(){
    return (
    <Card>
        <CardActionArea onClick={test}>
            ... // Card stuff
        </CardActionArea>
        <CardActions>
    </Card>)
    }
   }

  const mapStateToProps = (state) => {
     return {

     }
  }

  const mapDispatchToProps = (dispatch) => {
     return bindActionCreators({
         testAction:  testAction()
     }, dispatch)
   }
   export default connect(mapStateToProps, mapDispatchToProps) (testCard);

To give you further insight onto why "this" was giving you an error. It's because "this" always points to the closest object. Because you were not using a class-component (an object), it pointed to the global window object by default, which does not have a property of props . Which is why you were getting the error "cannot find props of undefined". You can work around this by a class-component in combination with arrow functions.

If you want to use the props passed down to non-class component, you would simply use:

props.nameOfValuePassedDown() instead of this.props.nameofValuePassedDown()

Answer 3

It is important that you have to know what props is. Most components can be customized when they are created, with different parameters. These creation parameters are called props . With props we can send and receive data from component to component . For enough understanding props, refer to react tutorial Tic-Tac-Toe game.

I hope this will be your help.