ComponentWillMount undefined

Question

Morgen Jungs, ich lerne rectjs und versuche, Admin-Listen-Daten von API-Server, die ich mit Expressjs gebaut habe zu holen. Nun, hier ist der Fall.

das ist mein Minderer:

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

das ist meine Aktion Schöpfer.

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

und dies ist mein Container

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

in render() Funktion i do console.log (admins.payload) und zeigen das Ergebnis Wie unten.

the result of consoling log(admins.payload)

ich bin sicher, dass „undefiniert“ aus dem Druckminderer kommt für die erste machen es Umschalten auf Standard bewegt, aber ich weiß nicht, wie diese zu lösen. wegen der undefinierten i das Ergebnis von meinem api-Server nicht zuordnen kann :(.

die Frage ist, wie diese zu lösen? Ich brauche Ihre Hilfe. Dank!

Answer 1

wenn youre Requisiten durch die Über benötigen Sie einen

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

Answer 2

dies:

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

sollte sein:

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

... und dann sollten Sie in Ihrer Komponente nicht einmal nach .payload suchen. Die Payload wurde in state.admin in Ihrem Reducer kopiert, der dann von redux's connect() in props.admin eingefügt wird.

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