TypeError: Object(...) is not a function in react redux

Question

我有一篇表单文章，我在其中发送操作

组件/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.

reducers/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;

存储/index.js

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

组件/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;

Action is not a function but const是actions must always be functions才能工作吗？

谁能让我知道我哪里出错了？

Answer 1

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

npm update

希望对你也有帮助