How to increment a state object with another object in React Native?

Asked

Viewed 505 times

1

Basically I have this method that takes some information from the API and stores it in a state variable (date: []), but since there are several pages, I would like to add the results in this variable to present, after all the requests, all results, but I don’t know how to do it.

makeRemoteRequest = (page) =>{
 const url = `http://api.themoviedb.org/3/movie/popular?api_key=<<api_key>>&page=${page}`;
  this.setState({loading: true});

  fetch(url)
        .then(res => res.json())
        .then(res => {
            this.setState({
                data:res.results,
                error: res.error || null,
                loading: false,
            })
            this.arrayholder = res.results;
        })
        .catch(error=>{
            this.setState({error, loading:false});
        })        
    }

The state: 

state = {
    loading: false,
    data: [],
    error: null,
    page: 1,
}

I have tried to use another variable to control, but I need an object, because to show the final results I will need all the data of the API result.

javascript react react-native

  • how many pages does this request have? that’s not very nice to do if the number of pages is large.

  • 500 pages. But I don’t intend to catch them all. Only 2 or 3.

  • then one can be done for only, but your doubt is how to aggregate the results, how to join the results (is a list of values neh, ie an array)

  • That. Technically I have already managed to do this, but when I go to arrays, I can only take the title (Response.data.title) and convert to a string that will stay in the array. But I would also need to take other values, like Sponse.data.id, etc..

2 answers

0


Friend in your case, you can use the structure that came with ES6 in Javascript, as follows:

state = {
    loading: false,
    data: [],
    error: null,
    page: 1,
}

makeRemoteRequest = (page) =>{
 const url = `http://api.themoviedb.org/3/movie/popular?api_key=<<api_key>>&page=${page}`;
  this.setState({loading: true});

  fetch(url)
        .then(res => res.json())
        .then(res => {
            this.setState({
                data:[...data, ...res.results],
                error: res.error || null,
                loading: false,
            })
            this.arrayholder = res.results;
        })
        .catch(error=>{
            this.setState({error, loading:false});
        })        
    }

So you continue with the data that was in the data array and insert new data by the response of the api.

0

To gather information between two or more array in javascript may use the technique of dismantling (that makes it possible to extract data from arrays or objects in different variables), example:

const a = [1, 2, 3];
const b = [4, 5, 6, 7];
const c = [ ... a, ... b];

console.log(c);

You can also use the method .concat to concatenate two arrays:

const a = [1, 2, 3];
const b = [4, 5, 6, 7];
const c = a.concat(b);

console.log(c);

Browser other questions tagged javascript react react-native

You are not signed in. Login or sign up in order to post.