React Native中使用Fetch获取JSON数据并适配FlatList的问题

问题原因 #

• Alert.alert只接收字符串类型参数，你直接传入JSON对象responseJson会触发类型错误，需要先转成字符串或者取具体字段展示。
• setState是异步更新方法，调用后不会立刻修改this.state的值，所以你在setState同一作用域下立刻读moviesList拿到的还是更新前的旧值。
• fetch是异步请求，你在fetch代码块外写的alert会在请求还没返回的时候就执行，自然拿不到返回的数据。
• FlatList当前绑定的是固定数据源DATA，没有和请求回来的状态关联，所以请求成功也不会渲染新数据。

解决方案 #

1. 要弹窗展示JSON数据的话，用JSON.stringify()把对象转成字符串，或者直接取你要展示的字段。
2. 如果要在setState更新完成后拿到最新值，可以用setState的第二个参数（回调函数），会在状态更新完成后触发。
3. FlatList的data属性绑定this.state.moviesList，同时给moviesList设置初始值为空数组，避免渲染报错。
4. 不要在渲染方法里调用fetch，建议放到componentDidMount生命周期或者下拉刷新的回调里，避免重复触发请求。

修正后的参考代码 #

// 构造函数初始化状态
constructor(props) {
    super(props);
    this.state = {
        loading: true,
        moviesList: [], // 初始值设为空数组，适配FlatList的data类型要求
        refreshing: false
    };
}

componentDidMount() {
    this.fetchMoviesData();
}

fetchMoviesData = () => {
    fetch("https://reactnative.dev/movies.json")
        .then(response => response.json())
        .then((responseJson) => {
            setTimeout(() => {
                this.setState({
                    loading: false,
                    moviesList: responseJson.movies,
                    refreshing: false
                }, () => {
                    // setState回调里拿最新的状态值
                    Alert.alert(JSON.stringify(this.state.moviesList))
                })
            }, 2000)
        })
        .catch(error => {
            console.log(error)
            this.setState({
                loading: false,
                refreshing: false
            })
        })
}

onRefresh = () => {
    this.setState({refreshing: true}, () => {
        this.fetchMoviesData();
    })
}

// 渲染FlatList部分
render() {
    const renderItem = ({item}) => {
        // 自定义你的列表项渲染逻辑
        return <Text>{item.title}</Text>
    }

    return (
        <FlatList
            data={this.state.moviesList} // 绑定state里的请求结果
            renderItem={renderItem}
            keyExtractor={item => item.id.toString()}
            refreshControl={
                <RefreshControl 
                    refreshing={this.state.refreshing} 
                    onRefresh={this.onRefresh} 
                    tintColor={themes[theme].auxiliaryText} 
                />
            }
        />
    );
}

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