javascript - React-Redux 类型错误 : Cannot read property 'setStatus' of undefined

Question

我是 React 和 Redux 的新手，我正在尝试更改 onChange 的下拉字段值，但是当我选择我得到的值时。看起来我正在关注 Redux 的基础知识 https://redux.js.org/basics ，尽管我研究了好几天以找到更好的解决方案以及如何重写 Action 函数，但查看文档的代码几乎相同。

TypeError: Cannot read property 'setStatus' of undefined

我的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);

我的`/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;
}

2018 年 9 月 2 日更新

所以在学习了一周的 babel 和我可以用于我的项目的插件之后，我找到了一个解决方案，可以在 babel 上安装一个插件，它有助于创建一个错误函数，比如 handleChange = (event) => { } 它叫做 babel-plugin-transform-class-properties 位于此处 https://babeljs.io/docs/en/babel-plugin-transform-class-properties/ .感谢 Bhojendra Rauniyar 提供的绑定(bind)帮助。

Answer 1

当你这样做时:

this.props.setStatus(value);

this 未定义。因为，您的方法不受约束。所以，你需要绑定(bind)this。有不同的方法，您可以尝试在构造函数中绑定(bind) this:

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