Невозможно вызвать избыточное действие (TypeError: Невозможно прочитать свойство {action} of undefined) - PullRequest
Новая
       9

Невозможно вызвать избыточное действие (TypeError: Невозможно прочитать свойство {action} of undefined)

0 голосов
/ 14 января 2019

Я пытаюсь вызвать избыточное действие из моего Dashboard компонента, но оно не распознает действие.

Он работает, когда я помещаю его в метод componentDidMount, но не работает с пользовательским методом handleAvatarChange.

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

Ответы [ 2 ]

0 голосов
/ 15 января 2019

в Dashboard.js, измените эту строку: 

handleAvatarChange={this.handleAvatarChange}

до: 

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

для получения дополнительной информации, вы можете прочитать эту статью: https://medium.com/@leonardobrunolima/javascript-tips-apply-vs-call-vs-bind-d738a9e8b4e1

0 голосов
/ 14 января 2019

Вы должны убедиться, что handleAvatarChange привязан правильно, потому что он использует this внутри, и вы передаете его как обратный вызов для вызова другого кода.

Просто измените handleAvatarChange(avatar) {, чтобы использовать синтаксис "свойств класса", который вы уже используете в другом месте: handleAvatarChange = (avatar) => {

...