使用mapStateWithProps后,React Redux无法在组件事件中找到道具

时间:2018-08-19 10:57:23

标签: javascript redux react-redux

我已经尝试了很多,但我不知道是什么问题。

即使添加了mapStateToProps和mapDispatchToProps属性,该组件中的props仍为空。每当我运行以下代码时,都会出现以下错误。
projList.js:94 Uncaught TypeError: _this2.props.addNewProj is not a function

我的组件类如下:

import React from 'react';
import { addProj } from '../actions';
import { connect } from 'react-redux';
import C from '../constants';

    class projList extends React.Component {
        constructor(props){
            super(props);
            this.state = {
                title: ''
            }
        }

        render(){
            const {title} = this.state;
            return(
            <section className='proj-list-container'>
                <div className='form'>
                    <label>project Title</label>
                    <input type='text' onChange={(e)=>{this.setState({title: e.target.value})}}/>
                    <button className='submit' onClick={()=>{this.props.addNewProj(title)}}>submit</button>
                </div>}
            </section>
            );
        }
    }
    const mapStateToProps = (state, props) =>
        ({
            projLists: state.addProjToList
        })

    const mapDispatchToProps = dispatch =>
        ({
            addNewProj(projObj) {
                dispatch(
                    addProj(C.ADD_PROJ, projObj)
                );
            }
        });
    export default connect (mapStateToProps, mapDispatchToProps)(projList);
    export default projList;

我的操作文件是

import C from './constants'
    export const addProj = ({title, endDate}) => {
        return ({
            type:C.ADD_PROJ,
            payload: {
                title, endDate
            }
        })
    }

我的商店文件是:

import C from '../constants';
import { combineReducers } from 'redux';
import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';

    export const addProjToList = (state=[], action) => {
        switch (action.type) {
            case C.ADD_PROJ :
                return [
                    ...state,
                    action.payload
                ]
            default : return state
        }
    }

    const appReducer =  combineReducers({
        addProjToList
    });
    export default (initialState={projList: []}) => {
        return applyMiddleware(thunk)(createStore)(appReducer, initialState);
    }

任何帮助将不胜感激。谢谢!

0 个答案:

没有答案