1

estoy consumiendo recursos de una API y almacenandolos en los states, especificamente en listadoItems: [] pero por cuando actualizo los states con la data proveniente de la api no me pasan los valores..devolviendome un array vacio en listadoItems: [] estoy trabajando con context api, siento que en this.setState no estoy pasando bien la ruta para hacer el feed de la data al array

export class AppProvider extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        store: {
            listadoItems: [],
            carroItems: []
        }
        ,
        action: {
            addItem: this.addItem,
            showModal: this.showModal
        }

    }
}

componentDidMount() {
    this.getInfo();
}

getInfo = () => {
    fetch('https://jsonplaceholder.typicode.com/users')
    .then(resp => {
        console.log(resp.status);
        return resp.json();
    })
    .then(data => {
        console.log('recibe: ', data);
        this.setState({
            listadoItems: data
        })
        console.log('listado: ', this.state.store.listadoItems);
    })
}
1
  • 1
    A parte de la respuesta que dieron ya, te añadiría que el state se actualiza de manera asíncrona, por lo que es posible que tu console.log aún no te muestre datos, para asegurarte mejor ejecuta el console.log en el callback del setState, así: this.setState({ store: { listadoItems: data } }, () => { console.log(this.state.store.listadoItems) }) Commented el 29 abr. 2019 a las 13:10

1 respuesta 1

2

En tu constructor estás asignando la propiedad listadoItems dentro de la propiedad store y esta última al state. En el uso de setState estás omitiendo la propiedad store, por lo tanto le estas agregando al state del componente la propiedad listadoItems. Como resultado te debería estar quedando un state con la siguiente estructura:

{
    store: {
        listadoItems: [],
        carroItems: []
    }
    ,
    action: {
        addItem: this.addItem,
        showModal: this.showModal
    },
    listadoItems: [/*tus datos*/]
}

Deberías cambiar la línea donde estableces el state a:

var _store = { store: { listadoItems: data }}
this.setState(_store)

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.