ComponentWillMount未定义

时间:2016-11-16 20:55:57

标签: javascript reactjs react-router react-jsx react-redux

早上的家伙,我正在学习reactjs并尝试从api服务器获取管理员列表数据,我使用expressjs构建。情况就是这样。

这是我的减速机:



import { FETCH_DATA } from '../actions/types';
const INITIAL_STATE = {};
export default function(state= INITIAL_STATE, action){
    switch(action.type){
        case FETCH_DATA :
            return {...state, payload: action.payload };
        default:
            return state;
    }
}




这是我的动作创作者。



export function getAllAdmin(){
    return (dispatch)=>{
        axios.get(`${Config.API_URL}/admin`)
            .then((response) => {
                dispatch({
                    type: FETCH_DATA,
                    payload: response.data
                });
                }
            )
            .catch(response => {
                console.log(response);
            });
    }
}




这是我的容器



import React, { Component } from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import * as actions from 'actions/admin_action';


class Admin extends Component{
    componentWillMount(){
        this.props.getAllAdmin()
    }
    renderData(){
        const admins = this.props.admin;
        console.log(admins.payload);
    }
  render(){
    
        return(
          <div>
            {this.renderData()}
          </div>
        )
  }
  
const mapStateToProps = (state) => {
    return { admin: state.admin }
}

export default connect(mapStateToProps, actions)(Admin);
&#13;
&#13;
&#13;

在renderData()函数中我执行console.log(admins.payload)并显示如下结果。

the result of consoling log(admins.payload)

我相信&#34; undefined&#34;来自第一个渲染的reducer它移动到默认开关,但我不知道如何解决这个问题。因为未定义我无法映射我的api服务器的结果:(。

问题是如何解决这个问题?我需要你的帮助。谢谢!

2 个答案:

答案 0 :(得分:1)

这样:

    case FETCH_DATA :
        return {...state, payload: action.payload };

应该是:

    case FETCH_DATA :
        return {...state, admin: action.payload };

...然后,您甚至不应该在组件中寻找.payload。有效载荷被复制到你的reducer中的state.admin,然后由redux的connect()填充到props.admin。

renderData(){
    const admins = this.props.admin;
    // console.log(admins.payload); <- don't need .payload here
    console.log(admins);
}

答案 1 :(得分:-1)

如果你传下道具你需要一个

class Admin extends Component{    
    contructor(props) {
       super(props);
    }