Question

我有一个屏幕，应该显示搜索结果。因此，我在render（）中创建了我的抓取。如this stackoverflow response中所述，我将响应推送到一个数组中。在控制台面板中，几秒钟后加载了结果数组，但是在我的屏幕上，结果数组仍然为空。

这是我的渲染功能

render() {
        let result = [];
        let endPoint = this.props.navigation.getParam('endPoint', '');
        fetch(endPoint, {
            method: "GET",
            headers: null,
        }).then(response => response.json())
            .then(response => {
                let list = response;
                for (let i = 0; i < list.length; i++) {
                    result.push(
                        <View key={i} style={styles.item}>
                            <View>
                                <View style={styles.imageContainer}>
                                    <Image style={styles.imageItem} resizeMode="cover"
                                           source={{uri: list[i].img}}/>
                                </View>
                            </View>
                            <View style={styles.inlineDetails}>
                                <Text style={styles.innerTitle}>
                                    {list[i].lieugeo}
                                </Text>
                                <Text style={styles.innerDescription}>
                                    {list[i].desc.substring(0, 80)}
                                </Text>

                            </View>
                        </View>
                    )
                }
            }).catch((error) => {
            console.error(error);
        });

        return (
            <ImageBackground source={require('./images/internal_bg.png')} style={{width: '100%', height: '100%'}}>
                <ScrollView>
                    <View style={styles.container}>
                        {result}
                    </View>
                </ScrollView>
            </ImageBackground>
        );
    }

预期结果：显示项目列表实际结果：屏幕仍然空白

Answer 1

您的问题是fetch是异步的。因此render不会在它渲染组件之前等待它完成。您应该在componentDidMount中进行数据检索，并使用结果修改组件状态。然后在渲染方法中使用此状态填充项目（更改状态后，组件将重新渲染）。您还应该在组件constructor方法中设置初始状态。

像下面这样：


    constructor(props) {
        super(props)
        this.state = { list: [] }
    }

    componentDidMount() {
        let endPoint = this.props.navigation.getParam('endPoint', '');
        fetch(endPoint, {
            method: "GET",
            headers: null,
        })
        .then(response => response.json())
        .then(response => {
            this.setState({ list: response })            
        })
        .catch((error) => {
            console.error(error);
        });
    }

    render() {
            let result = [];
            const { list } = this.state;

            for (let i = 0; i < list.length; i++) {
                result.push(
                    <View key={i} style={styles.item}>
                        <View>
                            <View style={styles.imageContainer}>
                                <Image style={styles.imageItem} resizeMode="cover"
                                       source={{uri: list[i].img}}/>
                            </View>
                        </View>
                        <View style={styles.inlineDetails}>
                            <Text style={styles.innerTitle}>
                                {list[i].lieugeo}
                            </Text>
                            <Text style={styles.innerDescription}>
                                {list[i].desc.substring(0, 80)}
                            </Text>

                        </View>
                    </View>
                )
            }

            return (
                <ImageBackground source={require('./images/internal_bg.png')} style={{width: '100%', height: '100%'}}>
                    <ScrollView>
                        <View style={styles.container}>
                            {result}
                        </View>
                    </ScrollView>
                </ImageBackground>
            );
        }

Answer 2

始终在componentDidMount（）{}中执行副作用，然后更新组件状态或Redux存储。您还可以使用响应数组并创建一个单独的子组件以显示该数组的结果。

通过这种方式，您的代码更加可重用

render(){
<View>
{this.state.data && this.state.data.map(item => <DisplayProduct data={item}/>)}
<View/>
}

在此状态下，Display产品一次接受一项作为道具，无论何时状态更新，子组件也会被更新，并且该组件可在您应用内的任何地方重复使用。

如何在同一屏幕上读取获取响应？

2 个答案: