解决 Promise 后渲染 JSX 元素

Question

我想在我提出请求并解决它之后渲染<Flatlist /> 然后渲染<Flatlist /> 这是我想要渲染的<Flatlist /> <FlatList data={DATA} renderItem={renderItem} keyExtractor={item => item.id} /> 请帮忙

Answer 1

React 渲染不能是异步的。

如果你需要依赖异步获取的数据，那么渲染函数应该从 state 中读取数据。

您需要为数据尚不存在做好准备（例如if (state.data) { return <Flatlist data={state.data} /> } else { return <LoadingSpinner /> }`。

触发componentDidMount 或useEffect 函数中的异步代码，当promise 解决时：使用新数据设置状态。

Answer 2

试试这个方法

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;