Question

我被困住了，不知道会发生什么。我有2个类似的代码（请看下面）。首先工作正常。但是第二个错误（代码最小化）：

Unhandled Rejection (TypeError): self.loadCustomersAction is not a function

第一（工作正常）：

...
import { loadCustomers } from '../../actions'

export class Component extends React.Component {
    componentDidMount() {
        this.props.loadCustomersAction()
    }
    render() {
        return (
            ...
        )
    }
}
const mapDispatchToProps = dispatch => {
    return {
        loadCustomersAction: () => dispatch(loadCustomers())
    }
}

export default connect(
    ...,
    mapDispatchToProps
)(withRouter(Component))

第二（给出错误）：

import { loadCustomers } from '../../actions'

export class Component2 extends React.Component {
    render() {
        return (
            ...
            <PrimaryButton onClick={this._handleSubmit} text="Add" />
            ...
        )
    }
    _handleSubmit = () => {
        var self = this
        axiosWithProgress.post(...).then((response) => {
            self.props.loadCustomersAction() // error here
        })
    }
}

const mapDispatchToProps = dispatch => {
    return {
        loadCustomersAction: () => dispatch(loadCustomers())
    }
}

export default connect(
    null,
    mapDispatchToProps
)(withRouter(Component2))

谁能告诉我哪里错了？我尝试了google和stackoverflow的几乎所有选项，但未成功。

UPD：将self.props.loadCustomersAction()更改为this.props.loadCustomersAction()不能解决问题。

UPD：也在mapDispatchToProps中传递ownProps。

Answer 1

您必须在this.props而不是self.props上调用函数，因为您不是静态将函数分配给您的类（实例）。

所以改变：

self.props.loadCustomersAction()

进入

this.props.loadCustomersAction()

Answer 2

也许您的代码无法在函数中获取/使用this，请尝试使用常规函数语法并在构造函数中绑定该函数。这可能有用。

或更改<PrimaryButton onClick={this._handleSubmit} text="Add" /> 至 <PrimaryButton onClick={this._handleSubmit.bind(this)} text="Add" /> 我希望这行得通。

Answer 3

Redux创建全局状态（变量和函数），可以通过this.props变量和this运算符进行访问。

Self用于接近当前窗口中可用的对象，而不是全局状态/ prop。所以，您需要更换它

self.props.loadCustomersAction()

到

this.props.loadCustomersAction()

自我与此之间的差异：Difference between this and self in JavaScript

如何在React中修复'x不是函数'

3 个答案: