Question

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

Answer 1

反应渲染不能异步。

如果您需要依赖异步获取的数据，那么render函数应该从 state 读取数据。

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

在componentDidMount或useEffect函数中触发异步代码，并在诺言得到解决时：用新数据设置状态。

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;

解决承诺后渲染JSX元素

2 个答案: