时间戳

首页 > 解决方案 > 无法调用 redux 操作（TypeError：无法读取未定义的属性 {action}）

reactjs - 无法调用 redux 操作（TypeError：无法读取未定义的属性 {action}）

问题描述

我试图从我的Dashboard组件中调用一个 redux 操作，但它无法识别该操作。

当我将它放在componentDidMount方法中时它可以工作，但不适用于自定义handleAvatarChange方法。

仪表板.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);

配置文件内容.js

class ProfileContent extends Component {

  ...

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

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

错误

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

标签： reactjsreduxreact-redux

解决方案

您需要确保handleAvatarChange正确绑定，因为它this在内部使用并且您将其作为回调传递给其他代码调用。

只需更改handleAvatarChange(avatar) {为使用您已经在其他地方使用的“类属性”语法： handleAvatarChange = (avatar) => {

推荐阅读