React Native下载JSON并展示时isLoading始终为true无法显示数据如何解决

1. 确认请求状态，验证JSON是否下载成功 #

• 给请求全链路加日志输出，修改你的componentDidMount代码，在每个关键节点加打印：

componentDidMount(){
    console.log('开始发起请求')
    return fetch('https://reactnative.dev/movies.json')
        .then((response) => {
            console.log('拿到原始响应，状态码：', response.status, response.ok)
            // 必须先判断响应是否正常，fetch只有网络错误才会进catch，4xx/5xx不会触发catch
            if(!response.ok) {
                throw new Error(`请求异常，状态码${response.status}`)
            }
            return response.json()
        })
        .then((responseJson) => {
            console.log('解析后的JSON内容：', responseJson)
            this.setState({
                isLoading: false,
                dataSource: responseJson.movies,
            }, () => {
                // setState回调，确认状态更新成功
                console.log('状态更新完成，isLoading值：', this.state.isLoading)
            })
        })
    .catch((error) => {
        console.error('请求出错：', error);
        // 出错也需要把isLoading设为false，避免一直转圈圈
        this.setState({
            isLoading: false
        })
    });
}

加完后打开React Native的调试控制台查看日志，就能明确知道是请求没发出去、响应异常、还是JSON解析失败、或者是状态更新出问题。

• 也可以用抓包工具或React Native Debugger的网络面板，直接查看请求的发起、响应完整数据。

2. 常见导致问题的原因，对应修复 #

• 缺少网络权限：如果是安卓端运行，先检查android/app/src/main/AndroidManifest.xml中是否添加了网络权限声明，没有的话加上：

<uses-permission android:name="android.permission.INTERNET" />

• 原代码没有处理请求异常场景：只要请求出错（没网、接口异常、JSON解析失败），就不会走到设置isLoading为false的逻辑，就会一直显示加载中，按照上面的代码修改catch逻辑，异常时也关闭加载状态即可。
• 如果日志显示请求已经成功、状态也更新为false，但还是显示加载动画，检查你当前页面是否有其他层级的加载组件覆盖了渲染内容，或者ActivityIndicator的样式是否设置了全屏等属性。
• 注意你代码中用到的styles.item没有在StyleSheet中定义，后续渲染列表时会报错，记得补充对应的样式。

内容的提问来源于stack exchange，提问作者Jsmidt