尝试使用点符号在控制台中记录数据对象但它不起作用，为啥？

Posted 2023-03-08

【中文标题】尝试使用点符号在控制台中记录数据对象但它不起作用，为啥？

【英文标题】：Trying to log a data object in the console using dot notation and it doesn't work, why?尝试使用点符号在控制台中记录数据对象但它不起作用，为什么？

【发布时间】：2022-01-18 09:09:46

【问题描述】：

我有一个使用 Graphql 和 Mongo 的 React 项目。进行查询时，我试图通过点符号在控制台中记录返回的数据，并返回“未定义”。

我不明白为什么？？

我的组件：

import  useQuery  from "@apollo/client";
import React,  useEffect  from "react";
import  GET_USER_SETTINGS  from "../graphql/getUserTimeSetting";

const UserAuthSettings = ( isAuthenticated, toggle, user =  name: ""  ) => 
  const  data, loading, error  = useQuery(GET_USER_SETTINGS, 
    variables:  userName: user.name ,
    options: 
      awaitRefetchQueries: true,
    ,
  );

  console.log(data.userTimeSetting);

 
  if (loading) return <div>Submitting...</div>;
  if (error) return <div>error.message</div>;

  return null;
;

export default UserAuthSettings;

控制台

如果我只有“console.log(data)

【参考方案1】：

好的，我找到了答案。

要通过 Apollo/客户端挂钩使用或“消费”数据，您需要在确保数据存在后执行此操作。

也就是说，代码块

if (loading) return <div>Submitting...</div>;
  if (error) return <div>error.message</div>;

必须出现在我的 console.log(data) 之前 - 否则查询仍在进行中并且反应无法验证数据的存在。因此出现错误。

太棒了，移动一个。

【讨论】：

是的，data 可以合法地未定义（不仅在初始渲染时，而且在请求失败时也是如此）。是的，您要么使用if() 来检查这种情况，要么使用optional chainging，或者使用像lodash 的_.get 这样的助手。