Redux TypeError:无法读取未定义的属性“setStatus”
我是新的反应和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的绑定帮助。
回答 2
Stack Overflow用户
发布于 2018-08-29 05:12:55
当你这样做时：
this.props.setStatus(value);this是未定义的。因为，您的方法不受约束。因此，您需要绑定this。有不同的方法，您可以尝试在构造函数中绑定this：
this.handleChangeStatus = this.handleChangeStatus.bind(this)Stack Overflow用户
发布于 2018-08-29 13: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
}你不需要两者兼得，只有一个。箭头函数是最简单的，但两者都能工作。
https://stackoverflow.com/questions/52069756
复制相似问题
腾讯云开发者
