Повторно отображать React Native Flatlist при получении данных из API

Question

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

class ProductList extends Component {
	state = {
                isSpinner: false,
		newArr: []
	        };
  
  	onScrollEndDrag = async() => {
		this.setState({ isSpinner: true });
		return await fetch(
			`myAPI`
		)
		.then(response => response.json())
		.then(json => {
		 this.setState({ newArr: [...this.state.newArr, ...(json || [])] })
		 return json;
		})
		.catch(error => console.log(error));
		}
		this.setState({ isSpinner: false });
	} 
  
    render(){
     const list = [data1,data2,data3];
    return(
      <Fragment>
       <FlatList
	key={this.key}
	data={[...list,...this.state.newArr]}
	renderItem={this.renderItem}
	/>
        <Button 
          title='Load More' 
          onPress={this.onScrollEndDrag}>
        </Button>
      </Fragment>
        )
      }
  }

Что можно сделать, чтобы показать новые данные API с существующим списком?

Answer 1

Поскольку вы в любом случае используете async await, нет необходимости снова использовать .then и .catch, вы можете сделать это следующим образом.

onScrollEndDrag = async() => {
    this.setState({ isSpinner: true });
    try {   
        const response = await fetch(`myAPI`);
        const json = await response.json();
        this.setState({ 
          newArr: [...this.state.newArr, ...(json || [])], 
          isSpinner: false 
        }) 
    } catch(error) { 
        console.log(error);
        this.setState({ isSpinner: false });
    }

} 

Надеюсь, это поможет.