React-Redux TypeError：無法讀取未定義的屬性“ setStatus”

Question

我是React和Redux的新手，我試圖更改一個下拉字段值onChange，但是當我選擇該值時，我得到了。 盡管我花了幾天時間尋找更好的解決方案以及如何重寫Action函數，但看起來我仍在遵循Redux的基礎知識https://redux.js.org/basics ，但是在文檔上查找的內容幾乎相同碼。

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

我的`/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/zh/babel-plugin-transform-class-properties/ 。 感謝Bhojendra Rauniyar提供有約束力的幫助。

Answer 1

當您這樣做時：

this.props.setStatus(value);

this是未定義的。 因為，您的方法不受限制。 因此，您需要綁定this 。 有不同的方法，您可以嘗試結合this在構造函數中：

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

Answer 2

就像@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
      }

您無需同時執行兩項操作。 箭頭功能最簡單，但兩者均可。