React Native中用户对象可打印但字段访问返回undefined求助

你遇到的情况是典型的闭包捕获旧值或者对象被包装为Proxy导致的，以下是具体排查和解决方法：

1. 闭包导致捕获旧的user值 #

浏览器console有个特性：打印对象时，显示的是你展开它时的最新值，而非执行console.log时的快照。这就会出现打印对象能看到name，但访问user.name却是undefined的矛盾——因为handleSubmit创建时捕获的是组件初始化时的user（可能还未完成异步更新），但console展开时user已经更新了。

解决方法：

• 用useRef保存最新的user引用：

const Chat = () => {
  const { user } = useContext(AuthenticatedUserContext);
  const userRef = useRef(user);

  // 每次user更新时同步ref
  useEffect(() => {
    userRef.current = user;
  }, [user]);

  const handleSubmit = async () => {
    console.log(userRef.current.name); // 现在能拿到正确值
    // ...其他逻辑
  };

  // ...剩余代码
};

• 或者用useCallback包裹handleSubmit，并添加user作为依赖，确保回调始终捕获最新的user：

const handleSubmit = useCallback(async () => {
  console.log(user.name);
  // ...其他逻辑
}, [user, messages, inputValue]);

2. user是被包装的Proxy对象 #

如果你的AuthenticatedUserContext是通过ORM、状态管理库或者某些API返回的Proxy对象，直接访问属性可能会因为代理的拦截逻辑失效。

解决方法：将Proxy转换为普通JavaScript对象：

const handleSubmit = async () => {
  const plainUser = JSON.parse(JSON.stringify(user));
  console.log(plainUser.name); // 正确获取name
  // ...其他逻辑
};

3. 排查键名是否存在异常 #

极少数情况是键名存在隐藏字符或大小写不一致，你可以打印所有键名确认：

console.log(Object.keys(user));

如果输出的键名不是["name", "about", ...]，说明键名有问题，需要检查上下文里user的赋值逻辑。

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