React Native JSON数据处理报错：Cannot read property 'username' of undefined

问题场景 #

使用ThunderClient调用API能正常返回包含username、password等字段的JSON数据，但执行以下React Native代码时出现报错：

async klikEdit(kdpemb){
    await fetch(this.url+"/?op=detail&kdpemb="+kdpemb)
    .then((response)=>response.json())
    .then((json)=>{
        this.setState({
            username:json.data.result[0].username,
            password:json.data.result[0].password,
            nip:json.data.result[0].nip,
            nama_guru:json.data.result[0].nama_guru,
            unit_kerja:json.data.result[0].unit_kerja,
            jabatan:json.data.result[0].jabatan,
            kdjurusan_tugas:json.data.result[0].kdjurusan_tugas,
            idEdit:kdpemb
        })
    })
}

报错信息：

Possible Unhandled Promise Rejection (id: 4):
TypeError: Cannot read property 'username' of undefined

需要将API返回值填入绑定对应state的TextInput。

解决方案 #

1. 校验API返回数据结构

先打印完整返回数据，确认实际层级是否和代码中json.data.result[0]匹配：

.then((json)=>{
    console.log('API完整返回:', json); // 查看实际数据结构
    // 后续setState代码
})

如果result是单个对象而非数组，需去掉[0]；如果result数组为空，也会导致访问失败。

2. 添加空值防护

使用可选链运算符?.避免层级缺失报错，同时给字段设置默认值：

this.setState({
    username: json.data?.result?.[0]?.username || '',
    password: json.data?.result?.[0]?.password || '',
    nip: json.data?.result?.[0]?.nip || '',
    nama_guru: json.data?.result?.[0]?.nama_guru || '',
    unit_kerja: json.data?.result?.[0]?.unit_kerja || '',
    jabatan: json.data?.result?.[0]?.jabatan || '',
    kdjurusan_tugas: json.data?.result?.[0]?.kdjurusan_tugas || '',
    idEdit: kdpemb
})

3. 完善错误捕获

原代码未处理请求失败或解析异常，用try/catch捕获所有错误，避免未处理的Promise拒绝：

async klikEdit(kdpemb){
    try {
        const response = await fetch(`${this.url}/?op=detail&kdpemb=${kdpemb}`);
        const json = await response.json();
        console.log('API返回数据:', json);
        this.setState({
            username: json.data?.result?.[0]?.username || '',
            password: json.data?.result?.[0]?.password || '',
            nip: json.data?.result?.[0]?.nip || '',
            nama_guru: json.data?.result?.[0]?.nama_guru || '',
            unit_kerja: json.data?.result?.[0]?.unit_kerja || '',
            jabatan: json.data?.result?.[0]?.jabatan || '',
            kdjurusan_tugas: json.data?.result?.[0]?.kdjurusan_tugas || '',
            idEdit: kdpemb
        });
    } catch (error) {
        console.error('请求或解析失败:', error);
    }
}

4. 初始化state默认值

确保组件state初始时所有绑定TextInput的字段都有默认值（比如空字符串），避免渲染异常：

constructor(props) {
    super(props);
    this.state = {
        username: '',
        password: '',
        nip: '',
        nama_guru: '',
        unit_kerja: '',
        jabatan: '',
        kdjurusan_tugas: '',
        idEdit: ''
    };
}

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