ComponentWillMount 未定义

Question

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

这是我的减速器：

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

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

the result of consoling log(admins.payload)

我确信“未定义”来自第一次渲染的减速器，它移动到默认开关，但我不知道如何解决这个问题。由于未定义，我无法从我的 api 服务器映射结果:(。

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

Answer 1

这个：

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

应该是：

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

...然后，您甚至不应该在组件中寻找 .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);
    }