React Native类组件用Axios实现CRUD时详情页数据渲染undefined问题

问题根因 #

• 初始渲染时接口请求尚未返回，你初始化dataTampung为空数组，直接访问数组的title属性本身就不存在，会返回undefined。
• 从打印结果可以看出接口返回的response.data.data.result是包含单条数据的数组结构，你直接对数组取title属性当然拿不到对应值，需要先取数组内的元素再访问字段。

修复代码 #

import React, { Component } from 'react'
import { Text, View } from 'react-native'
import axios from 'axios'

export class DetailData extends Component {

    constructor(props) {
        super(props)
        
        this.state = {
            dataTampung: null, // 单条数据不用初始化为数组
            loading: true
        }
    }

    componentDidMount (){
        this.getData(); 
    }
    
    getData = () => {
        axios.get('http:my_local_ip_endpoind/api.php?on=detail&id='+this.props.route.params.id)
        .then( response => {
            // 取数组的第一个元素作为详情数据
            this.setState({
                dataTampung: response.data.data.result[0],
                loading: false
            })
        })
        .catch(function (error) {
            console.log(error);
            this.setState({loading: false})
        });
    }

    render() {
        const { id } = this.props.route.params;
        const { dataTampung, loading } = this.state;

        if (loading) {
            return <Text>数据加载中</Text>
        }

        return (
            <View>
                <Text> This ID  = {id} </Text>
                {/* 可选链兼容异常情况，避免页面崩溃 */}
                <Text> Title  = {dataTampung?.title ?? '暂无数据'} </Text>
            </View>
        )
    }
}

export default DetailData

补充说明 #

如果你确认后续接口会调整返回结构，直接返回对象而非包裹在数组里，只要把response.data.data.result[0]改成response.data.data.result即可，逻辑通用。

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