社区首页 >问答首页 >Redux TypeError:无法读取未定义的属性“setStatus”

问Redux TypeError:无法读取未定义的属性“setStatus”
EN

Stack Overflow用户

提问于 2018-08-28 20:58:59

回答 2查看 448关注 0票数 1

我是新的反应和Redux，我试图改变一个下拉字段值onChange，但当我选择我要得到的值。看起来我正在跟踪Redux https://redux.js.org/basics的Basics，尽管我研究了几天以找到更好的解决方案和如何重写Action，但是查看文档几乎是相同的代码。

TypeError:无法读取未定义的属性“setStatus”

我的index.js

// @flow
import React from 'react';
import Select from 'react-select'
import {connect} from 'react-redux'

import {
  setStatus,
} from '../../actions'

type Props = {
  status: { value: ?string, label: ?string },
  setStatus: Function,
}

type State = {}

// Select Invoice Type
const statusOptions = [
  {value: 'paid', label: 'Paid'},
  {value: 'due', label: 'Due'},
  {value: 'overdue', label: 'Overdue'},
  {value: 'onhold', label: 'On Hold'}
];

class Dashboard extends React.Component<Props, State> {
  state: State;

  constructor(props: Props) {
    super(props);
    this.state = {}
  }

  handleChangeStatus(value: { value: ?string, label: ?string }) {
    console.log(value)
    if (value)
      this.props.setStatus(value);
    else
      this.props.setStatus({value: 'paid', label: 'Paid'});
  };

  render() {
    return (
      <div>
        {/* Select Invoice Status */}
        <Select
          name="status"
          value={this.props.status}
          options={statusOptions}
          searchable={false}
          onChange={this.handleChangeStatus}
        />
      </div>
    )
  }
}

function mapStateToProps(state, ownProps) {
  return {
    status: state.status,
  }
}

function mapDispatchToProps(dispatch) {
  return {
    setStatus: (statusObj) => dispatch(setStatus(statusObj)),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);

My `/action/index.js/

// @flow

import {
  SET_INVOICE_STATUS,
} from '../constants';

export type Action = {
  status?: Object,
}

export function setStatus(status: Object): Action {
  return {
    type: SET_INVOICE_STATUS,
    status
  }
}

我的/constant/index.js

// @flow

// Dashboard Implementation
export const SET_INVOICE_STATUS: string = "SET_INVOICE_STATUS";

最后我的reducer/index.js

// @flow

import {SET_INVOICE_STATUS} from "../constants";
import type {Action} from "../actions";

type State = Object;

export default function statusReducer(state: State = {value: 'paid', label: 'Paid'}, action: Action) {
  if (action.type === SET_INVOICE_STATUS) {
    return action.status;
  }

  return state;
}

更新SEP 2,2018年

因此，在学习了一个星期后，我可以在我的项目中使用的babel和插件，我找到了一个解决方案，安装一个插件到babel，帮助创建一个错误函数，如handleChange = (event) => {}，它的babel-plugin-transform-class-properties，位于这里的https://babeljs.io/docs/en/babel-plugin-transform-class-properties/。感谢Bhojendra Rauniyar的绑定帮助。

javascript

reactjs

回答 2

Stack Overflow用户

发布于 2018-08-28 21:12:55

当你这样做时：

this.props.setStatus(value);

this是未定义的。因为，您的方法不受约束。因此，您需要绑定this。有不同的方法，您可以尝试在构造函数中绑定this：

this.handleChangeStatus = this.handleChangeStatus.bind(this)

票数 4

Stack Overflow用户

发布于 2018-08-29 05:50:31

就像@Bhojendra所说的那样，您可以这样做，这是两种方法之一(都需要绑定handleChangeStatus函数。首先是使用箭头函数：

 handleChangeStatus = (value: { value: ?string, label: ?string }) => { //binds with arrow func
    console.log(value)
    if (value)
      this.props.setStatus(value);
    else
      this.props.setStatus({value: 'paid', label: 'Paid'});
  };

或者第二，在构造函数处绑定：

    constructor(props: Props) {
        super(props);
        this.state = {}
        this.handleChangeStatus = this.handleChangeStatus.bind(this) // binding this to your function
      }