React Native中使用useState设置对象后访问属性返回undefined的原因

嘿，我遇到过类似的坑，这其实是状态类型不匹配加上React状态更新的异步特性导致的，我给你拆解下：

核心原因 #

1. 初始状态类型错误
   你一开始把address的初始值设成了空字符串''，但后续更新的是一个对象类型的数据。当你尝试访问address.street_number时，如果此时状态还没完成更新（或者处于初始渲染阶段），address还是字符串类型——字符串本身没有street_number这类属性，自然会返回undefined。

2. React状态更新的异步性
   哪怕你立刻调用setAddress传入对象，React并不会同步更新状态，组件会先完成当前渲染（使用旧的字符串状态），之后才会重新渲染更新后的对象状态。这就导致在第一次渲染时，你访问属性得到的就是undefined。

解决办法 #

方法1：统一初始状态类型 #

最彻底的解决方式是把初始状态改成空对象，和后续要更新的类型保持一致：

// 可以设为空对象，或者更严谨地给属性设默认空值
const [address, setAddress] = useState({ street_number: '', street: '', city: '' });

这样不管是初始渲染还是更新后，address都是对象类型，访问属性就不会出现undefined了。

方法2：使用可选链安全访问 #

如果不想改初始状态，可以用ES6的可选链操作符?.来避免报错，同时优雅处理undefined的情况：

// 当address是字符串或者未定义时，会返回undefined而不是报错
<Text>街道号：{address?.street_number}</Text>
<Text>街道：{address?.street}</Text>

方法3：条件渲染过滤无效状态 #

在渲染相关内容前，先判断address是否为有效对象：

{typeof address === 'object' && address !== null && (
  <View>
    <Text>{address.street_number}</Text>
    <Text>{address.street}</Text>
  </View>
)}

这样只有当状态确实是对象时，才会渲染对应的属性内容，避免访问错误类型的属性。

完整示例代码 #

import { useState, useEffect } from 'react';
import { Text, View } from 'react-native';

export default function AddressComponent() {
  // 统一初始状态为对象类型
  const [address, setAddress] = useState({});

  useEffect(() => {
    // 模拟从接口或其他地方获取地址数据
    const fetchedAddress = {"street_number":"1","street":"Wheins","city":"Denmark"};
    setAddress(fetchedAddress);
  }, []);

  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 16 }}>
        地址：{address?.street_number} {address?.street}，{address?.city}
      </Text>
    </View>
  );
}

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