从 API 获取数据时重新渲染 React Native Flatlist

Question

我正在开发一个使用Flatlist的 React Native 应用程序。我有一个要渲染的列表。但是我想将项目添加到我从 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 });
    }

} 

希望这可以帮助。