Question

我从componentDidMount调度操作时遇到问题... 错误是：TypeError：this.props.postDetails不是函数

Action.js

export const postDetails = data => ({
        type: "POST_DETAILS",
        post: data
})

集装箱/ GetDetails.js

import Details from '../components/Details'
import { postDetails } from '../actions'

const mapStateToProps = state => ({ post: state.post });

const mapDispatchToProps = dispatch => bindActionCreators({postDetails}, dispatch);

const GetDetails = connect(
    mapStateToProps,
    mapDispatchToProps 
)(Details)

export default GetDetails

组件/ Details.js

import React from 'react'
import { postDetails } from '../actions'


class Details extends React.Component {
    constructor(props){
        super(props);
    }

    componentDidMount() {
        console.log("did mount details");
        this.props.postDetails();
    }

    render() {
        return (
            <div>
                Details page
            </div>
        )
    }
}

export default Details;

有人能帮助我吗？为什么我有这个错误？

Answer 1

你必须返回一个对象，其中的键是你的道具。请参阅docs。

const mapDispatchToProps = dispatch => ({ postDetails: bindActionCreators({postDetails}, dispatch) })

或者，您可以使用简写符号：

const GetDetails = connect(
    mapStateToProps,
    { postDetails }
)(Details)

Answer 2

在App.js中（或在导入Details组件的任何地方），您是否在使用GetDetails容器容器（不是组件）的路径？

我将状态从组件移动到了容器，却忘了更新导入路径，这给了我同样的错误。更新到容器的导入路径已解决了这个问题。

编辑：

例如，我有一个apiLanding文件夹，其中包含apiLanding.js（组件）和apiLanding-container.js（容器）。

在我的app.js中，我需要进行更改

从'./components/apiLanding/apiLanding'导入apiLanding；

到

从'./components/apiLanding/apiLanding-container'导入apiLanding；

这样，应用程序现在可以访问redux状态和操作。这是一个愚蠢的错误，可能不是您的问题，但想分享一下，以防导入路径被忽略。

Answer 3

我没有看到导入的bindActionCreator。使用eslint摆脱这些错误

Answer 4

有两件事对我来说并不合适。我个人从未使用bindActionCreators。我只想创建我的mapDispatchToProps：

const mapDispatchToProps = dispatch => {
  return {
    postDetails: () => dispatch(actions.postDetails)
  };
};

但是你的 postDetails 调用也需要一个参数，你应该在函数调用中添加一个参数。所以你的 mapDispatchToProps 看起来像这样：

const mapDispatchToProps = dispatch => {
      return {
        postDetails: (data) => dispatch(actions.postDetails(data))
      };
    };

此外，您还要将操作导入为postDetails。你确定这只是一个动作吗？而不是文件中所有操作的组合？请注意我将您的功能添加为actions.postDetails而不仅仅是postDetails。

this.props ...不是函数反应react-redux

4 个答案: