0

Tengo un problema al renderizar la lista de todos los post con React, quiero renderizar una funcion con un mapeo de los posts pero me dice que el que es indefinido, a que se debe . utilizé mapStateToProps para llamar al array todos

mi componente ListaPost

import React from 'react';
import {connect } from 'react-redux';
import {cargaPost} from '../acciones/index';
import {Link} from 'react-router-dom';
class ListaPost extends React.Component {
    componentWillMount() {
        this.props.fetchPost();
    }
    renderPost () {
        return this.props.posts.map( post => {
            return(<li className="list-group-item" key={post.id}>
            <span className="text-right">{post.title}</span>
        </li>)
        })
    }
    render() { 
        // const { posts } = this.props;
        // if (!posts) {
        //   return <div>Loading...</div>
        // }
        return (
            <div>
                <div className="text-right">
                    <Link
                    to="/posts/new" 
                    >
                    <button 
                    type="button" 
                    className="btn btn-info">
                    Nuevo Post
                    </button>

                    </Link>
                </div>

                <ul className="list-group">
                    {this.renderPost()}
                </ul>
            </div>
        )
    }
}
const mapStateToProps = (state) => {
    return { posts: state.posts.todos }
}
export default connect(mapStateToProps, {fetchPost: cargaPost})(ListaPost);

mis acciones

import axios from 'axios';

export const FETCH_POST = 'FETCH_POST';
export const CREAR_POST = 'CREAR_POST';
const URL = 'http://reduxblog.herokuapp.com/api';
const API_KEY = '1234557';

// ListaPost
export function cargaPost () {
    const solicitud = axios.get(URL)
    .then( res => { console.log(res) })
    return {
        type: FETCH_POST,
        payload: solicitud
    }      
}

y el reducer

import {FETCH_POST} from '../acciones/index';

const estadoInicial = { todos:[], unPost: null }
// PostReducer
export default function(state=estadoInicial, accion) {
    switch(accion.type) {
        case FETCH_POST:
            return {...state, todos: accion.payload.data }
        default:
            return state;
    }
}

1 respuesta 1

1

Me parece que en la acción cargaPost, solicitud = axios.get(URL) regresa una promesa, los valores de la promesa cumplida solo están definidos adentro del .then(), pero tu estás regresando afuera de él (puedes consologear solucitud antes del return para que veas que es una promesa). Una posible solución sería utilizar await para esperar esos valores y luego despacharlos, pero en mi opinión la mejor solución sería utilizar redux-thunks, cuyo objetivo es resolver justo ese problema que estás teniendo. Con thunks la solución sería de esta manera:

function cargaPost () {
   return dispatch => {
     axios.get(URL)
       .then( res => { 
         dispatch({
           type: FETCH_POST,
           payload: solicitud
         })
       })
   }
}

Espero te sea de ayuda. Saludos!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.