TypeError: Object (...) не является функцией в реагирующем редуксе - PullRequest
Новая
       6

TypeError: Object (...) не является функцией в реагирующем редуксе

0 голосов
/ 03 декабря 2018

У меня есть статья в форме, в которую я отправляю действия

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 });

stacktrace 

                 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.

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

Действие не является функцией, но const заключается в том, что проблема заключается в том, что действия всегда должны быть функциями для работы?

Может кто-нибудь знает, где я ошибаюсь?

1 Ответ

0 голосов
/ 28 апреля 2019

У меня была такая же проблема.Попробовав огромное количество вариаций в коде, я просто попытался обновить React и Reaction-DOM, который решил это за меня. 

npm update

Надеюсь, это вам тоже поможет

...