Добавление массивов объектов из разных ответов API

Question

Я работаю над приложением React Native, в котором я использую FlatList. Данные, которые я показываю в FlatList, поступают из ответа API. Теперь API выдает разные данные каждый раз при нажатии кнопки. Я хочу добавить все ответы после нажатия кнопки и отобразить их в FlatList. Я закончил до этой части здесь:

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>
)
}

Показывает список. Но не показывает добавленный newArr. Как это сделать, чтобы при нажатии Load новый ответ добавлялся к предыдущему.

Answer 1

Думаю, проблема в этой строке

this.setState({ newArr: json })

Вы заменяете предыдущие данные на более новые. Измените его, чтобы объединить с предыдущими данными.

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

Answer 2

Проблема здесь в том, что ваши данные постоянно сбрасываются / изменяются каждый раз, когда вызывается функция рендеринга. почему бы вам не сохранить newArr как источник правды для ваших данных? Попробуйте следующее:

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>
)
}