react-redux获取props的值失败

新手上路,请多包涵

react-redux做的一个todolist,render()里面this.props.todoData为undefined, this.props.doneData却可以获取成功

这里是container

import React, { Component } from 'react';
// import '../css/main.css'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { initTodo, initDone, addTodo } from '../reducers/TodoListReducer.js'
import { TodoList } from '../components/TodoList.js';
class TodoListContianer extends Component {

static propTypes = {
    todoData:PropTypes.array, 
    doneData:PropTypes.array
}
constructor(props) {
    super(props)
    this._loadTodoData = this._loadTodoData.bind(this)
    this._loadDoneData = this._loadDoneData.bind(this)
}
componentWillMount() {
    this._loadTodoData()
    this._loadDoneData()
}
_loadTodoData() {
    let todoData = localStorage.getItem('todoList')
    todoData = todoData ? JSON.parse(todoData) : []
    // let doneData = [{value:'12', update:true}]
    // todoData = [...todoData, ...doneData]
    this.props.initTodo(todoData)
}
_loadDoneData() {
    let doneData = localStorage.getItem('doneList')
    doneData = doneData ? JSON.parse(doneData) : [] 
    this.props.initDone(doneData)
}

render() {
    return (
        <TodoList

// this.props.todoData为undefined, this.props.doneData却可以获取成功

            todoData={this.props.todoData}
            doneData={this.props.doneData}
        />
    )
}

}

const mapStateToProps = (state) => {

return {
    todoData:state.todoData,
    doneData:state.doneData
}

}

const mapDispatchToProps = (dispatch) => {

return {
    initTodo:(todoData) => {
        dispatch(initTodo(todoData))
    },
    initDone:(doneData) => {
        dispatch(initDone(doneData))
    }
}

}

export default connect(

mapStateToProps, 
mapDispatchToProps

)(TodoListContianer)

再贴上reducer
const INIT_TODOlIST = 'INIT_TODOlIST'
const INIT_DONElIST = 'INIT_DONElIST'
const DELETE_TODOlIST = 'DELETE_TODOlIST'
const DELETE_DONELIST = 'DELETE_DONELIST'
const ADD_TODOLOST = 'ADD_TODOLOST'
const EDIT_TODOLIST = 'EDIT_TODOLIST'
const CHANGE_STATE = 'EDIT_TODOLIST'

export const TodoListReducer = (state, action) => {

if(!state) {
    state = { 
        todoData:[],
        doneData:[]
    }
}
switch(action.type) {
    case INIT_TODOlIST:
    return {todoData:action.todoData}
    case INIT_DONElIST:
    return {doneData:action.doneData}
    case DELETE_TODOlIST:
    return {todoData:action.todoData}
    case DELETE_DONELIST:
    return {doneData:action.doneData}
    case ADD_TODOLOST:
    return {todoData:action.todoData}
    case EDIT_TODOLIST:
    return {todoData:action.todoData}
    case CHANGE_STATE:
    return {todoData:action.todoData}
    default:
    return state
}

}

export const initTodo = (todoData) => {

return {type:INIT_TODOlIST, todoData}

}
export const initDone = (doneData) => {

return {type:INIT_DONElIST, doneData}

}

export const addTodo = (todoData) => {

return {type:ADD_TODOLOST, todoData}

}

阅读 2.2k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题