钩子查询在 useEffect 中返回空对象，但在它之后却没有，为什么？答案

【问题标题】：Hook query retruning empty object inside useEffect but not after it Why?钩子查询在 useEffect 中返回空对象，但在它之后却没有，为什么？
【发布时间】：2026-02-02 12:05:01
【问题描述】：

所以我有一个查询钩子，我希望通过它用数据填充状态变量。问题是，在 useEffect 中，查询作为 {} 对象返回，但在 useEffect 正确返回数据之后（见图）。我试图在所有变量定义之后放置 useEffect ，但这会发出钩子渲染错误。我在这里忽略了什么以及如何解决这个问题？

  // Single Item Query
  const { data: singledItemData, error: errorSingleItem, loading: loadingSingleItem } = useQuery(
    SINGLE_ITEM_QUERY, {
      variables: {
        id: props.id,
      }
    }
  );

  useEffect(() => {
    console.log("singledItemData in useEffect = ", singledItemData);
    if (singledItemData.item) {
      setColor(singledItemData.item.color.name);
    }
  }, []);

  // User hook variables
  if (!user) return null;
  if (user.error) return <Error error={user.error} />;

  // Single Item Query variables

  if (loadingSingleItem) return <p>Loading...</p>;
  if (!singledItemData.item) return <p>No Item Found for ID {props.id}</p>;

  console.log("Single Item Data = ", singledItemData);

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

当使用useQuery 的组件挂载时，它会启动一个异步的网络请求。但是，您的 useEffect 挂钩会在组件安装后执行一次（由于依赖项列表为空）。此时请求很可能还没有完成，因此没有可用的数据。一旦请求完成，您的组件将使用接收到的数据再次重新渲染（由useQuery 挂钩中的状态更新触发）。但是这次你的useEffect 回调将不会被再次调用。将 singledItemData 添加到依赖列表以查看更改，或者在外部范围中添加 console.log 以查看每个渲染的更改。

所以这不是错误，而是预期的行为。

【讨论】：

【解决方案2】：

这是因为你传递了一个空数组作为 useEffect 钩子的第二个参数。这将使钩子在挂载时只运行一次。如果要在每次singledItemData发生变化时运行，需要在数组中传递。

  useEffect(() => {
    console.log("singledItemData in useEffect = ", singledItemData);
    if (singledItemData.item) {
      setColor(singledItemData.item.color.name);
    }
  }, [singledItemData]);

【讨论】：