React自定义Hook返回undefined问题：Hook内部数据正常但组件中content值为undefined

核心原因：变量名不匹配导致content为undefined #

你在组件里解构的是content，但自定义HookuseContent返回的对象属性是arContent——这就是为什么组件里content拿不到值，而status正常的直接原因。

除此之外，你的Hook代码还有几个需要修复的问题，我会逐个说明并给出修正后的代码：

1. 修复变量名不匹配 #

两种可选方案：

• 方案一：修改组件的解构逻辑，匹配Hook返回的属性名

// 组件里修改解构
const { arContent: content, status } = useContent("king_of_the_birds");
console.log("Live", content, status);

• 方案二：在Hook里直接返回content属性，让组件可以直接解构

// useContent.js里修改返回值
return { content: arContent, status };

2. 导入缺失的useState #

你的Hook里使用了useState但没有从React导入，这会导致运行时错误，必须补上：

import { useState, useEffect } from "react"; // 新增useState导入

3. 移除未定义的value变量 #

Hook里的console.log("inside async useContent", value);中的value是未定义的，替换为实际要打印的变量即可：

console.log("inside async useContent", localCache[title]);

4. 修复useEffect的无限循环问题 #

你把arContent加入了useEffect的依赖数组，但在useEffect内部又调用了setArContent，这会触发useEffect反复执行，形成无限循环。应该移除arContent，只保留title作为依赖：

useEffect(() => {
  // ... 内部逻辑不变
}, [title]); // 仅保留title作为依赖项

5. 优化请求失败时的状态处理 #

当前请求失败时，localCache[title]可能没有被赋值，导致arContent还是undefined，可以在catch块里设置默认值：

catch (error) {
  console.error(error);
  localCache[title] = {}; // 请求失败时设置默认空对象，避免undefined
}

修正后的完整代码 #

组件代码

import { useEffect } from "react";
import { useContent } from "@/components/hooks/useContent";
const Live = ({ title }) => {
  // 采用方案一：通过别名匹配变量名
  const { arContent: content, status } = useContent("king_of_the_birds");
  console.log("Live", content, status);
  return (
    <div>
      <div>Content: {JSON.stringify(content)}</div> {/* 用JSON.stringify方便查看对象内容 */}
      <div>Status: {status}</div>
    </div>
  );
};
export default Live;

自定义Hook代码 - useContent.js

import { useState, useEffect } from "react";

const localCache = {};
const BASE_URL = process.env.NEXT_PUBLIC_URL;

async function requestArContent(title) {
  console.log("pinging server for content");
  try {
    const res = await fetch(`${BASE_URL}/api/books`);
    const json = (await res.json()) || {};
    localCache[title] = json;
  } catch (error) {
    console.error(error);
    localCache[title] = {}; // 请求失败时设置默认值
  }
  return localCache[title];
}

export function useContent(title) {
  const [arContent, setArContent] = useState({}); // 初始化空对象，避免初始值为undefined
  const [status, setStatus] = useState("unloaded");

  useEffect(() => {
    (async () => {
      if (!title) {
        setArContent({});
        setStatus("loaded");
      } else if (localCache[title]) {
        setArContent(localCache[title]);
        setStatus("loaded");
      } else {
        setStatus("loading");
        const data = await requestArContent(title);
        setArContent(data); // 直接使用请求返回的数据，无需二次读取缓存
        console.log("inside async useContent", data);
        setStatus("loaded");
      }
    })();
  }, [title]);

  console.log("arcontent", arContent);
  return { arContent, status };
}

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