Reactjs 分派不是一个函数react redux

我有一个react组件，当我尝试调度redux操作时，它会抛出一个错误。以下是组件：

import React from 'react'; 
import { connect } from 'react-redux';
import { createBook } from './actions/books';  
import './InputForm.css'; 

export class InputForm extends React.Component {

    onFormSubmit(event) {
        event.preventDefault(); 
        let newBook = {
            title: this.titleInput.value, 
            author: this.authorInput.value, 
            description: this.descriptionInput.value
        }
        this.props.dispatch(createBook(newBook)); 
    }

    render() {
        return (
            <div>
                <form onSubmit={event => this.onFormSubmit(event)}> 
                    <input className="form-input" placeholder="Title" ref={input => this.titleInput = input} />
                    <input className="form-input" placeholder="Author" ref={input => this.authorInput = input} />
                    <input className="form-input form-text-area" placeholder="Description" ref={input => this.descriptionInput = input} />
                    <button className="form-button" type="submit">Submit</button>
                </form>
            </div>
        )
    }
}

export default connect()(InputForm); 

我不知道发生了什么事。以下是我得到的错误：

Uncaught TypeError: this.props.dispatch is not a function
    at InputForm.onFormSubmit (InputForm.js:15)
    at onSubmit (InputForm.js:21)
    at HTMLUnknownElement.callCallback 

我有另一个组件设置几乎相同使用不同的行动。它很好用。如果有人想比较，下面是该组件：

import React from 'react'; 
import './Book.css'; 
import { deleteBook } from './actions/books'; 
import { connect } from 'react-redux'; 

export class Book extends React.Component {

    onDelete(event) {
        this.props.dispatch(deleteBook(this.props.id)); 
    }

    render() {
        return (
            <div className="book-container">
                <h4>{this.props.title}</h4>
                <p>{this.props.author}</p>
                <p>{this.props.description}</p>
                <p>{this.props.id}</p>
                <button className="book-delete-button" onClick={event => this.onDelete(event)}>Delete</button>
            </div>
        )
    }
}

export default connect()(Book); 

从“React”导入React；
导入“/Book.css”；
从“./actions/books”导入{deleteBook}；
从'react redux'导入{connect}；
导出类书扩展React.Component{
onDelete（事件）{
this.props.dispatch（deleteBook（this.props.id））；
}
render（）{
返回(
{this.props.title}
{this.props.author}

{this.props.description}

{this.props.id}

this.onDelete（event）}>Delete
)
}
}
导出默认连接（）（书本）；

---

不知道这是怎么回事。请帮忙

这里似乎至少有两个问题会导致问题

这取决于您导入组件的方式。您正在导出2 每个模块中的组件：

• 命名导出（组件）
• 和默认导出（新连接的组件）

如果导入命名的导出：

import { InputForm } from './path'; 

您将没有相关的

redux

道具，因为这不是 连接的组件。
这就是为什么其他连接组件中的一个工作正常，尽管它似乎具有相同的代码和结构模式。
您可能会以应该的方式导入它（

default

import）

确保导入

默认组件：

import InputForm from './path';

另一件引起我注意的事情是，你没有约束 事件处理程序

onFormSubmit

，因此我希望

this

是 触发事件的元素。虽然我想如果那是 问题，您将得到不同的错误

---

我已经在容器组件中导入了断开连接的版本。愚蠢的错误

您是否尝试过将您的this.props记录到console.log中以查看它指向什么？当我尝试将它们记录到console.log中时，它没有任何道具。但是为什么呢？只是好奇，前几天我也在处理类似的事情。这些组件也被包装在一个带有connect的页面中？您能在

导入

和使用

输入表单

的地方显示代码吗？问题可能是导入组件的方式。您可以通过两种方式导出它，一种是命名导出（如果您导入它，可能会导致此问题）和一种默认导出（这是您应该导入它的方式），对于我们来说，要调试它非常困难，最好使用react-dev工具扩展来检查react元素树。查看组件层次结构和所有组件的支柱将告诉您比我们任何人都多的信息。+1这是一个很好的捕获，澄清一下，未连接的InputForm被导出为属性（

InputPort{InputForm}

），而连接的InputForm被导出为默认值。使用未连接的组件肯定会导致此问题。出于这个原因，我通常不会以相同的名称导出这两个组件。（如果我需要未连接的版本进行测试，我将以不同的名称导出它）@caesay确实，我共享相同的模式。

import InputForm from './path';