reactjs - 如何解决按机冻结问题，直到另一个 fetch api 在本机反应中完成

Question

在本机反应中，我注意到在 api 调用结束并且数据返回之前，在 onPress 单击事件中冻结的问题。

例如，如果一个按钮单击只是显示警报消息，或者它是导航到另一个屏幕：

 <Button title="Click for other functionality"
              onPress={()=>{
                Alert.alert("Another click")
  }} />

api 调用正在从 jsonplaceholder 获取数据：

  baseURL = 'https://jsonplaceholder.typicode.com';
  getData = (ev)=>{
        this.setState({loaded:false, error: null});
        let url = this.baseURL + '/photos';
        let h = new Headers();
        h.append('Authorization', 'Bearer sjdkfhakdkakhkajsdhks');
        h.append('X-Client', 'Steve and Friends');

        let req = new Request(url, {
            headers: h,
            method: 'GET'
        });

        fetch(req)
        .then(response=>response.json())
        .then(this.showData)
    }

getData 并在 componentDidMount 中调用。

问题是当单击按钮（单击以获取其他功能）时，在 getData 完成之前它永远不会起作用。如何在不等待 api 调用完成的情况下使按钮工作？

该问题从未出现在ios中，仅出现在android中。

完整的代码片段链接

Answer 1

一个人不会简单地创建 5000 个视图而没有任何延迟。

我的建议使用 FlatList 而不是 ScrollView。

                <FlatList data={this.state.data} renderItem={({item,index})=>{
                   return ( <Text key={item.id} style={styles.txt}>
                        {item}
                    </Text>)
                }
                }/>

这就是方法。