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

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.

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;

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

希望对您有帮助

TypeError：Object（...）不是React Redux中的函数

1 个答案: