TypeError:对象(..)不是react redux中的函数

Question

我有一篇表单文章，我在其中调度操作

components/form.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import uuidvl from 'uuid';
import { addArticle } from '../actions/index';
const mapDispatchtoProps = dispatch => {
return {
addArticle: article => dispatch(addArticle(article))
};
};
class ConnectedForm extends Component {
constructor() {
super();
this.state = {
title: ''
}
}
handleChange(eVal, nm) {
this.setState({ "title": eVal })
}
handleSubmit(ev) {
ev.preventDefault();
const { title } = this.state;
const id = uuidvl();
this.props.addArticle({ title, id });
this.setState({ title: '' });
}
render() {
const { title } = this.state;
return (
<div>
<form onSubmit={this.handleSubmit.bind(this)}>
<input type='text' value={title} id="title" onChange={(e) => this.handleChange(e.target.value, 'article')} />
<button type="submit">Add</button>
</form>
</div>
);
}
}
const Form = connect(null, mapDispatchtoProps)(ConnectedForm);
export default Form;

js/actions/index.js

import { ADD_ARTICLE } from "../constants/action-types";
export const addArticle = article => ({ type: ADD_ARTICLE, payload: article });

当我点击添加时，我得到以下错误

TypeError: Object(...) is not a function

突出显示了这些行

addArticle:article =>dispatch(addArticle(article))
this.props.addArticle({ title , id });

堆垛机

TypeError: Object(...) is not a function
addArticle
E:/reacr-redux/src/components/Form.js:7
4 | import { addArticle } from '../actions/index';
5 | const mapDispatchtoProps= dispatch=>{
6 |     return{
>  7 |         addArticle:article =>dispatch(addArticle(article))
| ^   8 |     };
9 | };
10 | class ConnectedForm extends Component{
View compiled
ConnectedForm.handleSubmit
E:/reacr-redux/src/components/Form.js:24
21 |     ev.preventDefault();
22 |     const { title }=this.state;
23 |     const id = uuidvl();
> 24 |     this.props.addArticle({ title , id });
| ^  25 |     this.setState({title:''});
26 | }                
27 | render(){
View compiled
▶ 18 stack frames were collapsed.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

减速器/index.js

import { ADD_ARTICLE } from "../constants/action-types";
const initialState={
articles:[]
};
const rootReducer= ( state = initialState ,  action ) => {
switch(action.type){
case ADD_ARTICLE:        
return {...state,articles:[...state.articles,action.payload]};
default :
return state;
}
};
export default rootReducer;

store/index.js

import { createStore } from "redux";
import rootReducer from "../reducers/index";
const store=createStore(rootReducer);
export default store;

components/list.js

import React from 'react';
import { connect } from 'react-redux';
const mapStateToProps=  state =>{
return { articles :state.articles};
}
const connectedList = ({ articles }) =>(
articles.map(e=>(
<li key={e.id}>{e.title}</li>
))
);
const List= connect(mapStateToProps)(connectedList);
export default List;

操作不是函数，但常量是动作必须始终是函数才能工作的问题吗？

有人能告诉我哪里错了吗？

Answer 1

我也遇到了同样的问题。在尝试了代码中的大量变体后，我只是尝试更新React和React DOM，这为我解决了问题

npm update

希望这也能帮助你