mapDispatchToProps 不工作。 props 为空（错误：redux action 不是函数）

Posted 2023-02-22

技术标签:

【中文标题】mapDispatchToProps 不工作。 props 为空（错误：redux action 不是函数）【英文标题】：mapDispatchToProps not working. Props empty (error: redux action is not a function) 【发布时间】：2017-12-05 13:28:38 【问题描述】：

我收到此错误：this.props.postBooks 不是函数。

我有一个动作 - postBooks - 我试图通过道具发送。

这是我的组件：

"use strict"

import React from 'react'
import Well,Panel,FormControl,FormGroup,ControlLabel,Button from 'react-bootstrap'
import connect from 'react-redux'
import bindActionCreators from 'redux'
import postBooks from '../../actions/booksActions'
import findDOMNode from 'react-dom'

export class BooksForm extends React.Component

    handleSubmit()
        const book = [
            title: findDOMNode(this.refs.title).value,
            description: findDOMNode(this.refs.description).value,
            price: findDOMNode(this.refs.price).value
        ]
        this.props.postBooks(book)
    
    render()

        return(
            <Well>
                <Panel>
                    <FormGroup    controlId='title'>
                        <ControlLabel> Title </ControlLabel>
                        <FormControl    
                            type='text'
                            placeholder='Enter Title'
                            ref='title' />
                    </FormGroup>

                    <FormGroup    controlId='description'>
                        <ControlLabel> Enter Description </ControlLabel>
                        <FormControl    
                            type='text'
                            placeholder='Enter Description'
                            ref='description' />
                    </FormGroup>

                    <FormGroup    controlId='price'>
                        <ControlLabel> Enter Price </ControlLabel>
                        <FormControl    
                            type='text'
                            placeholder='Enter Price'
                            ref='price' />
                    </FormGroup>
                    <Button 
                    onClick=this.handleSubmit.bind(this)
                    bsStyle='primary'> Enter New Book </Button>

                </Panel>
            </Well>
            )
    



function mapDispatchToProps(dispatch)
    return bindActionCreators(postBooks,dispatch)

export default connect(null,mapDispatchToProps)(BooksForm);

似乎调度没有按预期映射到道具，因为在控制台记录道具时，道具是空的。任何帮助表示赞赏。提前致谢

编辑：添加操作

 "use strict"
// POST A BOOK
export function postBooks(book)
    return 
        type:"POST_BOOK",
        payload: book
    

// DELETE A BOOK
export function deleteBooks(id)
    return 
        type:"DELETE_BOOK",
        payload: id
    

//UPDATE BOOK
export function updateBooks(book)
    return 
        type:"UPDATE_BOOK",
        payload: book
    


//Retrieve all books as if using API

export function getBooks()
    return
        type:'GET_BOOKS'

【问题讨论】：

我们可以看到mapDispatchToProps 代码吗？如果我理解正确的话，mapDispatchToProps 函数位于组件代码的底部。 【参考方案1】：

请在导入 redux 商店后重试。让我知道这是否有效。也不建议使用 refs。 https://facebook.github.io/react/docs/refs-and-the-dom.html

【讨论】：

在 bindActionCreators 内的 postBooks 周围加上花括号。动作创建者应该是一个函数，你给了它一个对象。我想这就是问题所在。告诉我。我不这么认为。通过使用对象，我让 bindActionCreators 知道这个组件中的 postBooks 属性应该调度我从 bookActions 模块导入的 postBooks 动作。我以前用过这种格式没有问题。【参考方案2】：

想通了。

所以我在顶部导出组件并在下面导出默认值。

注意到 webpack 给出错误“导入和导出可能只出现在顶层”。继续并删除了顶部导出，现在可以按预期工作。

【讨论】：

我很高兴它现在对你有用，但我认为这实际上不是你的问题。 export class BooksForm ... 和 export default connect 之间的区别是一个使用 import BooksForm from './BooksForm' 导入另一个文件，另一个是 import BooksForm from './BooksForm'（注意括号）。您导出的方式很好，并且通常出于测试目的这样做。 webpack 错误为more likely related to an error in your babel config。我还从 Class 行中删除了我的导出并重建了我的项目，反应原生。现在工作。谢谢。我犯同样错误的原因是我从现有的导出常规组件转到将组件连接到 redux。这也是我的问题。不错的选择。【参考方案3】：

遇到同样的问题，我刚刚从import 中删除了花括号：

来自 import AppTest from "./AppTest"; 到 import AppTest from "./AppTest";

这似乎解决了问题。请注意，我的班级已经有了“导出默认值”。

【讨论】：

【参考方案4】：

所以我遇到了同样的问题，并且问题与其他有用的答案中显示的相同，但我会尝试更详细地解释为什么会发生这种情况

如果我们使用默认导出和命名导出来定义类，如下所示（基于问题）：

// named export
export class BooksForm extends React.Component      
.......
function mapDispatchToProps(dispatch)
    return bindActionCreators(postBooks,dispatch)

// default export
export default connect(null,mapDispatchToProps)(BooksForm);

那么我们在导入类的时候要小心导入默认导出而不是命名导出：

这将导入默认导出并应与 redux 一起正常工作

import BooksForm from "./thePath"

这会导入命名的导出并且不适用于 redux

import BooksForm from "./thePath"

如果我们在同一个类中定义两个导入（通常这样做是为了使单元测试更容易）：

那么我们必须在渲染组件时导入默认导出，才能使用我们导出的redux connect()高阶函数。

有时，如果您只依赖编辑器自动导入，它会导入命名的导出（没有 redux 连接），因此会报错