Home / Questions / 259162
Accepted
ricardo leiva sikic
Asked: 2020-04-29 10:18:58 +0800 CST 2020-04-29 10:18:58 +0800 CST

React does not save data in the state

  • 772

I am consuming resources from an API and storing them in the states, specifically in ListaItems: [] but when I update the states with the data coming from the api they do not pass me the values... returning an empty array in ListaItems: [] I am working with context api, I feel that in this.setState I am not passing the route correctly to feed the data to the 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);
    })
}
javascript

1 Answers

  1. Best Answer

    In your constructor you are assigning the property listadoItemsinside the property storeand the latter to the state. In the use of setStateyou are omitting the property store, therefore you are adding the property to the component's statelistadoItems . As a result, you should be left with a state with the following structure:

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

    You should change the line where you set the state to:

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