解析 A 后渲染 JSX 元素 Promise

Question

I Want To Render A <Flatlist /> After I Make A Request And Resolve It Then Render The <Flatlist /> Here Is The <Flatlist /> that I Want To Render <FlatList data={DATA} renderItem={renderItem} keyExtractor={item => item.id} /> Please Help

Answer 1

React rendering cannot be asynchronous.

If you need to depend on data acquired asynchronously then the render function should read the data from the state .

You need to be prepared for when the data doesn't exist yet (eg if (state.data) { return <Flatlist data={state.data} /> } else { return <LoadingSpinner /> }`.

Trigger the asynchronous code inside componentDidMount or a useEffect function, and when the promise resolves: Set the state with the new data.

Answer 2

Try this way

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = { data: [] };
    }

    componentDidMount() {
        fetch('http://api/..', {
            method: 'GET',
        }).then((response) => response.json())
            .then((responseJson) => { return this.setState({ data: responseJson }) })
            .catch((error) => { alert(error) }
            );
    }

    render() {
        const data = this.state.data;
        return (
            <View>
                {data.length != 0 ?
                    <FlatList
                        data={data}
                        keyExtractor={(x, i) => x + i}
                        renderItem={({ item }) => <Text>{item.name}-DATA</Text>}
                    />
                    : <View>
                        <Text>No data found</Text>
                     </View>
                }

            </View>
        );
    }
}

export default App;