Adding object arrays from diffrerent api responses

Question

I'm working on a React Native app where i'm using FlatList. The data i'm showing in the FlatList are coming from API response. Now, the API throws different data each time on a button click. I want to add all the responses after button press and show in the FlatList. I have done till this part here:

state = {
count: 1,
newArr: []
};

onScrollEndDrag = async () => {
this.setState({ count: this.state.count + 1 })
return await fetch(
    `$myAPI/products/` + `?page=${this.state.count}`
)
    .then(response => response.json())
    .then(json => {
        this.setState({ newArr: json })
        return json;
    })
    .catch(error => warn(error));
}

render(){
const list = [data1, data2, data3]
return (
    <Fragment>
        <FlatList
            key={this.key}
            data={[...list, ...this.state.newArr]}
            renderItem={this.renderItem}
            scrollEventThrottle={1}
        />

        <Button title='Load More' onPress={this.onScrollEndDrag}></Button>
    </Fragment>
)
}

It shows the list. But doesn't show the added newArr. How this can be done that on pressing Load newer response will be added to the previous one.

Siraj Alam · Accepted Answer · 2020-06-18 11:27:34Z

1

I think the problem is in this line

this.setState({ newArr: json })

You're replacing the previous data with the newer one. Change it to merge with the previous data.

this.setState({ newArr: [...this.state.newArr, ...(json || [])] })

edited Jun 18, 2020 at 11:27

answered Jun 18, 2020 at 11:17

Siraj Alam

10.2k10 gold badges61 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Tanmoy Sarker Over a year ago

Yes, it's working. It adds the newArr. But does not renders to the app. Can you say why it's not rendering? @SirajAlam

Siraj Alam Over a year ago

Well, that you have to debug. As you're saying the data is populating into the newArr, so check how many times renderItem is running. It should be equal to the length of the newArra, and if it is, then your this problem is resolved, and there's a different problem that need to be check.

Siraj Alam Over a year ago

Also, I had a typo in my answer, fixed it. Can you check again?

Tanmoy Sarker Over a year ago

Yaah i tried fixing the typo already. How to i check how many times renderItem is running by the way? Do, i have to rerender in some way to show newArr data in the app?

Siraj Alam Over a year ago

Just add a console statement, it will log as many times as the function called.

|

Nikhil Asrani · Accepted Answer · 2020-06-18 11:23:21Z

0

The issue here is that your data keeps getting reset/changed everytime your render function is called. why don't you keep newArr as your source of truth for your data? Try the following:

state = {
count: 1,
newArr: [data1, data2, data3]
};

onScrollEndDrag = async () => {
this.setState({ count: this.state.count + 1 })
return await fetch(
    `$myAPI/products/` + `?page=${this.state.count}`
)
    .then(response => response.json())
    .then(json => {
        this.setState({ newArr: [...newArr, json] })
        return json;
    })
    .catch(error => warn(error));
}

render(){
return (
    <Fragment>
        <FlatList
            key={this.key}
            data={this.state.newArr}
            renderItem={this.renderItem}
            scrollEventThrottle={1}
        />

        <Button title='Load More' onPress={this.onScrollEndDrag}></Button>
    </Fragment>
)
}

answered Jun 18, 2020 at 11:23

Nikhil Asrani

1111 silver badge6 bronze badges

1 Comment

Tanmoy Sarker Over a year ago

Actually i already have a list to render. I need to add newArr data to the list when they are coming on button press from the API. @NikhilAsrani

Collectives™ on Stack Overflow

Adding object arrays from diffrerent api responses

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related