访问嵌套数组对象属性时出现Cannot read properties of undefined错误怎么办？

问题根源 #

你遇到的Cannot read properties of undefined (reading 'nom')错误，核心原因有两个：

1. 数组遍历逻辑错误：在Representatives组件中，你对props.representative数组执行map时，错误地将每个遍历项elu当成嵌套数组，试图读取elu[0].nom，但实际上elu本身就是API返回的单个对象，并非数组。
2. 初始状态类型不匹配：Searchbar中departement的初始状态设为数组[]，但它是用来存储输入字符串的变量，初始值应为空字符串''，避免请求URL出现异常参数。

修复代码 #

1. 修正Representatives组件 #

把elu[0].nom改为elu.nom，因为map遍历的每个元素就是包含nom属性的对象：

import React from "react";

export default function Representatives(props){
    return(
        <>
            {props.representative.map(elu => 
                <h2 key={elu.code}>nom de l'elu: {elu.nom}</h2>
            )}
        </>
    )
}

注意：给map生成的元素加上key属性，符合React列表渲染规范。

2. 修正Searchbar组件的初始状态与请求逻辑 #

将departement的初始状态改为空字符串，并添加空值判断避免无效请求：

import React, {useEffect, useState} from "react";
import Representatives from './Representatives'

export default function Searchbar () {
    // 初始值改为空字符串，匹配输入框的字符串类型
    const [departement, setDepartement] = useState('');
    const [representative, setRepresentative] = useState([]);
    const url = `https://geo.api.gouv.fr/departements?nom=${departement}&limit=1`;

    useEffect(() => {
        const fetchGeoData = async () =>{
            // 避免空字符串时发起无效请求
            if(!departement) return;
            const response = await fetch(url);
            const data = await response.json();
            // 确保状态始终为数组，避免map报错
            setRepresentative(data || []);
        }
        fetchGeoData();
    }, [departement]);

    return(
        <>
            <form>
                <input 
                    type='text' 
                    placeholder="departement" 
                    onChange={(event)=> setDepartement(event.target.value)} 
                    autoFocus 
                />
            </form>
            <Representatives representative={representative} />
        </>
    )
}

通用避坑技巧（解决同类问题） #

以后处理嵌套数组/对象的属性访问时，记住这几点：

• 先确认数据结构：通过console.log打印返回数据，明确每个层级的类型（数组/对象），再针对性访问。
• 使用可选链操作符：如果不确定某个层级是否存在，用?.语法，比如elu?.nom，即使elu为undefined也不会触发报错。
• 初始状态匹配：确保组件状态的初始类型和后续存储的数据类型一致，比如存储字符串就初始化为''，存储数组就初始化为[]。

内容的提问来源于stack exchange，提问作者Séthy Laleye