为何已定义并赋值的useState对象返回null？

我在React组件里遇到个问题：用useState定义了card对象并尝试赋值，但读取card时得到null，明明接口响应不是空的。

前端服务器调用代码 #

const { id } = useParams();
const [card, setCard] = useState({});
console.log(id);
// useEffect(()=>{
//     console.log('Component rendering...');
//
// },[id]);
fetch(`http://localhost:${port}/api/asked/${id}`, {
    method: "GET"
})
    .then((response) => {
        console.log(response);
        if (response.status === 200) {
            return response.json(); // 返回一个Promise
        } else {
            console.log('请求失败，状态码：' + response.status);
            throw new Error('请求失败，状态码：' + response.status);
        }
    })
    .then((data) => {
        console.log(data);
        setCard(data); // 数据处理完成后更新card状态
    })
    .catch((error) => {
        console.log(error);
    });

后端接口方法 #

app.get('/api/asked/:id',(req, res)=>{
    // 从请求中获取id参数
    const key= req.params.id;
    asked(key).then((result)=>{
        res.send(result);
    });
 }); 

核心请求方法定义 #

function asked(key){
    return fetch(`https://api.discogs.com/releases/${bigInt(key)}`, {
        method: 'GET',
        headers: {
            'Authorization': authorizationHeader,
        }
    })
        .then((res) => {
            if (!res.ok) {
                throw new Error(`HTTP请求错误！状态码：${res.status}`);
            }
            return res.json();
        })
        .then((data) => MusicAlbum(data))
        .catch((error) => {
            console.error("获取数据出错：", error);
            return {};
        });
} 

解决步骤 #

• 把fetch请求移入useEffect钩子
  当前fetch直接写在组件顶层，会导致组件每次渲染都重复发起请求，而且setCard是异步操作，组件初始渲染时会先拿到useState({})的初始值，后续更新后如果没正确监听状态变化，就会误以为card是null。取消注释原本的useEffect，把fetch逻辑移进去，依赖项设置为[id]，确保只有id变化时才重新请求：

  useEffect(()=>{
      fetch(`http://localhost:${port}/api/asked/${id}`, {
          method: "GET"
      })
      .then((response) => {
          console.log(response);
          if (response.status === 200) {
              return response.json();
          } else {
              console.log('请求失败，状态码：' + response.status);
              throw new Error('请求失败，状态码：' + response.status);
          }
      })
      .then((data) => {
          console.log(data);
          setCard(data);
      })
      .catch((error) => {
          console.log(error);
      });
  },[id]);
  

• 确认读取card的时机
  useState的更新是异步的，初始渲染时card是你设置的空对象{}，如果直接读取card的深层属性（比如card.title）会得到undefined，容易被误判为null。需要用条件渲染或者可选链操作符确保数据加载完成后再读取：

  // 条件渲染，确保数据存在后再渲染
  {card.id && <div>{card.title}</div>}
  // 可选链操作符，避免属性不存在报错
  <div>{card?.title}</div>
  

• 排查数据流转环节

  1. 检查后端asked方法里的MusicAlbum(data)是否返回了有效对象——在该方法的then里打印MusicAlbum(data)的结果，确认没有返回null或undefined；
  2. 查看前端控制台的console.log(data)输出，确认接口返回的数据结构符合预期，如果data是空对象，那要排查后端调用Discogs API是否成功。

• 处理异步竞态问题（可选）
  如果id频繁切换，可能出现旧请求晚于新请求完成，导致card被旧数据覆盖。可以在useEffect里添加挂载标记，确保只有组件挂载时的请求才会更新状态：

  useEffect(()=>{
      let isMounted = true;
      fetch(`http://localhost:${port}/api/asked/${id}`, {
          method: "GET"
      })
      .then((response) => response.json())
      .then((data) => {
          if (isMounted) setCard(data);
      })
      .catch((error) => {
          console.log(error);
      });
      // 组件卸载时标记为未挂载，取消后续状态更新
      return () => { isMounted = false; };
  },[id]);
  

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