React Native中使用Axios Get请求取数后无法渲染event.title的问题

核心问题列表 #

• useState使用不规范：声明的状态变量名event与更新函数名getEvents语义不匹配，且初始值设置为空字符串，不符合后续存储返回数据的结构要求。
• 函数组件错误使用类组件语法：代码中state = {result: []}在函数组件中不会生效，无法通过result直接访问该变量。
• 渲染判断条件错误：if(getEvents.length > 0)中的getEvents是状态更新函数，其长度固定为1，永远不会触发你想要的非空判断逻辑。
• 遍历的数据源不存在：渲染时直接写result.map，此处的result没有定义，实际返回的数组存在于你存入event状态的result属性中。
• 列表渲染未加唯一key：React要求列表循环渲染的元素必须添加唯一key属性，否则会触发警告甚至渲染异常。

修正后代码 #

import { useState, useEffect } from 'react';
import { View, ScrollView, Text, TouchableOpacity, Image, StyleSheet } from 'react-native';
import axios from 'axios';

const Events = () => {
    // 修正useState定义，初始值匹配数据结构
    const [eventData, setEventData] = useState({ result: [] });

    useEffect(() => {
        getAllEvents();
    }, []);

    const getAllEvents = () => {
        axios.get(url) // 此处替换为实际请求地址
        .then((response) => {
            const result = response.data;
            setEventData({ result });
            console.log('Data has been recieved!');
            console.log(result);
        })
        .catch(error => {
            console.log('Error retrieving data!', error);
        })
    }

    // 修正判断条件，判断返回数组的实际长度
    if(eventData.result.length > 0) {
        return(
            <View>
                <ScrollView>
                    <Text style = {styles.bigtext}>Eventet</Text>
                    <View nativeID = "allRows" style = {{flexDirection: "column",justifyContent: "center",alignItems: "center"}}> 
                        <View nativeID = "row" style = {{flexDirection: "row",justifyContent: "center",alignItems: "center", margin: 1}}> 
                            <View style = {styles.event}> 
                                <TouchableOpacity onPress={() => { showModal(); }}> 
                                    <Image style = {{borderTopLeftRadius:10, borderTopRightRadius:10, height: 159, width: 159}}  source={require('../../assets/45.png')}  />
                                </TouchableOpacity>
                                {/* 修正遍历数据源，添加key属性 */}
                                {eventData.result.map( event => 
                                    <Text 
                                        key={event.id} // 若event无唯一id可临时用index替代，不推荐长期使用
                                        onPress={() => { showModal(); }} 
                                        style = {styles.eventTitle}
                                    >
                                        {event.title}
                                    </Text>
                                )}
                            </View>
                        </View>
                    </View>
                </ScrollView>
            </View>
        );  
    } else {
        return(
            <View>
                <Text>No events!</Text>
            </View>
        );
    }
};

// 补充自定义样式即可
const styles = StyleSheet.create({
    bigtext: {},
    event: {},
    eventTitle: {}
})

export default Events;

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