Question

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

这是我的减速机：

＆＃13;

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

＆＃13;

这是我的动作创作者。

＆＃13;

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

＆＃13;

这是我的容器

＆＃13;

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;

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

the result of consoling log(admins.payload)

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

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

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

Answer 2

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

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

ComponentWillMount未定义

2 个答案: