Cannot call redux action (TypeError: Cannot read property {action} of undefined)

Question

I am trying to call a redux action from my Dashboard component, but it doesn't recognize the action.

It works when I put it inside componentDidMount method but doesn't work on the custom handleAvatarChange method.

Dashboard.js

...
import {
  getCurrentProfile,
  changeAvatar
} from "../../actions/profileActions";


class Dashboard extends Component {
  componentDidMount() {
    let avatar = {...};
    this.props.changeAvatar(avatar); // this works
  }

  handleAvatarChange(avatar) {
    this.props.changeAvatar(avatar); // this doesn't work
  }

   ...

   render() {
     return (
       <ProfileContent
              handleAvatarChange={this.handleAvatarChange}
        />
     )
  }
}

export default connect(
  mapStateToProps,
  { getCurrentProfile, changeAvatar }
)(Dashboard);

ProfileContent.js

class ProfileContent extends Component {

  ...

 onImageDrop = acceptedFiles => {
    this.props.handleAvatarChange(acceptedFiles);
  };

  render() {
     return (
        <ImageDropZone onImageDrop={this.onImageDrop} />
     )
  }
}

Error

Dashboard.js:24 Uncaught TypeError: Cannot read property 'changeAvatar' of undefined
    at Object.handleAvatarChange (Dashboard.js:24)
    at Object.ProfileContent._this.onImageDrop (ProfileContent.js:22)
    at Dropzone.ImageDropZone._this.onDrop (ImageDropZone.js:10)
    at Dropzone.<anonymous> (index.js:251)
    at callCallback (react-dom.development.js:11743)
    at commitUpdateEffects (react-dom.development.js:11783)
    at commitUpdateQueue (react-dom.development.js:11771)
    at commitLifeCycles (react-dom.development.js:17030)
    at commitAllLifeCycles (react-dom.development.js:18512)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at commitRoot (react-dom.development.js:18717)
    at completeRoot (react-dom.development.js:20247)
    at performWorkOnRoot (react-dom.development.js:20170)
    at performWork (react-dom.development.js:20075)
    at performSyncWork (react-dom.development.js:20049)
    at requestWork (react-dom.development.js:19904)
    at scheduleWork (react-dom.development.js:19711)
    at Object.enqueueSetState (react-dom.development.js:12936)
    at Dropzone.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:356)
    at index.js:246

markerikson · Accepted Answer · 2019-01-14 17:55:59Z

2

You need to make sure that handleAvatarChange is bound correctly, because it uses this inside and you're passing it around as a callback for other code to call.

Just change handleAvatarChange(avatar) { to use the "class properties" syntax, which you're already using elsewhere: handleAvatarChange = (avatar) => {

answered Jan 14, 2019 at 17:55

markerikson

67.9k10 gold badges161 silver badges177 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kilzid · Accepted Answer · 2019-01-15 14:46:15Z

1

in Dashboard.js, change this line:

handleAvatarChange={this.handleAvatarChange}

to:

handleAvatarChange={this.handleAvatarChange.bind(this)}

for more data, you can read this article: https://medium.com/@leonardobrunolima/javascript-tips-apply-vs-call-vs-bind-d738a9e8b4e1

answered Jan 15, 2019 at 14:46

kilzid

1837 bronze badges

Collectives™ on Stack Overflow

Cannot call redux action (TypeError: Cannot read property {action} of undefined)

Dashboard.js

ProfileContent.js

Error

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Dashboard.js

ProfileContent.js

Error

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related