React使用useState渲染对象数组时出现TypeError的解决方法

你的初始state设为了数组[]，但接口返回的是单个对象（包含name、projectmembers数组的对象）。组件首次渲染时，member还是空数组，没有projectmembers属性，此时访问member.projectmembers[0]就会触发Cannot read properties of undefined (reading '0')错误——因为member.projectmembers是undefined，无法读取它的索引0。

1. 修正初始state的类型 #

把初始值改成和接口返回数据匹配的结构，确保projectmembers在数据加载完成前是一个空数组：

const [member, setMember] = useState({ projectmembers: [] });

2. 渲染时使用可选链做安全访问 #

即使初始state已修正，也建议用可选链操作符（?.）避免意外报错：

{member.projectmembers?.[0]?.name}

3. （可选）添加加载状态优化体验 #

如果数据加载耗时较长，可以增加加载状态提示：

const [member, setMember] = useState({ projectmembers: [] });
const [isLoading, setIsLoading] = useState(true);

const tofetchallmember = async ()=>{
    try {
        const res = await fetch(`/member/${id}`,{/*请求配置*/})
        const data = await res.json()
        setMember(data)
    } catch (err) {
        console.error('数据获取失败:', err);
    } finally {
        setIsLoading(false);
    }
}

useEffect(() => tofetchallmember(), [])

渲染时：

{isLoading ? '加载中...' : member.projectmembers?.[0]?.name}

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