Question

我收到此错误：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'
    }
}

Answer 1

想出来。

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

注意到webpack发出错误＆＃39;导入和导出可能只出现在顶级＆＃39;。走在前面并取消了顶级出口，现在按预期工作。

Answer 2

面对同样的问题，我刚从{projects: Array(3), Success: true, StatusMessage: "", PageNumber: 0, PageSize: 0, …} PageNumber:0 PageSize:0 StatusMessage:"" Success:true TotalPages:1 projects:Array(3) 0:{ProjectName: "DemoTranslatorHub", ProjectLabel: null, DisplayName: "DemoTranslatorHub", SourceLanguage: "English", TargetLanguage: "Korean", …} 1:{ProjectName: "DemoTranslatorHub_En_Es", ProjectLabel: null, DisplayName: "DemoTranslatorHub_En_Es", SourceLanguage: "English", TargetLanguage: "Spanish", …} 2:{ProjectName: "DemoTranslatorHub_En_Ja", ProjectLabel: null, DisplayName: "DemoTranslatorHub_En_Ja", SourceLanguage: "English", TargetLanguage: "Japanese", …} length:3删除了大括号：

发件人 import 要 import {AppTest} from "./AppTest";

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

Answer 3

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

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

// 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连接），因此会出现该错误

底线

您不必删除2个导出中的任何一个，只需导入默认导出（不带花括号）即可正确使用redux connect（）

Answer 4

我曾经遇到过同样的问题，我发现将两个文件互相导入会导致某种无限循环，这只会破坏该过程。我使用流静态类型检查器，并且在将操作导入到组件中时，将组件导入到操作文件中进行类型检查，并且发生了此问题，因此我删除了将组件导入到操作文件中的操作，问题解决了。

Answer 5

导入redux商店后请再试一次。如果有效，请告诉我。不建议使用refs。 https://facebook.github.io/react/docs/refs-and-the-dom.html

mapDispatchToProps不起作用。道具空（错误：redux动作不是函数）

5 个答案:

底线