React组件从外部API获取数据后无法正常展示的问题求助

我看了你的代码和问题描述，马上就发现几个关键问题，这就是页面没法渲染carbon.forecast的原因：

1. 没有启用state的更新能力 #

你现在的useState只解构了状态值carbon，但没有拿到更新它的函数setCarbon——React的state是只读的，必须用对应的更新函数才能修改状态，进而触发组件重新渲染。

2. useEffect缺少依赖数组，会无限重复请求 #

你的useEffect没有加第二个参数（依赖数组），这会导致组件每次渲染时都重新执行这个副作用，不仅浪费资源，也会干扰状态更新。

3. 获取数据后没有更新state，也没处理API返回的结构 #

你在控制台打印了数据，但没有把数据存入state；另外看这个API的返回格式，forecast是嵌套在data数组的第一个对象里的，直接用carbon.forecast一开始也拿不到正确的值。

修复后的完整代码 #

import React, {useState, useEffect} from 'react'
import './Track.css';

export default function Track() {
  // 初始化state为对象，同时拿到更新函数
  const [carbon, setCarbon] = useState({});

  useEffect( () => {
    const headers = {
      'Accept':'application/json'
    };
    fetch('https://api.carbonintensity.org.uk/intensity', {
      method: 'GET',
      headers: headers
    })
    .then(res => res.json())
    .then(body => {
      // 把API返回的第一个数据项存入state
      setCarbon(body.data[0]);
    })
    .catch(err => console.error('请求出错:', err)); // 别忘了加错误处理
  }, []) // 空依赖数组：只在组件挂载时执行一次

  return (
    <div>
      <p>Track</p>
      <div>
        {/* 使用可选链操作符，避免初始状态为{}时的报错 */}
        <p>{carbon?.forecast}</p>
      </div>
    </div>
  )
}

额外说明 #

• 用carbon?.forecast是因为组件初始渲染时carbon是空对象，直接访问carbon.forecast会抛出错误，可选链操作符会在carbon为undefined或null时返回undefined，避免报错。
• 加上catch处理网络请求可能出现的错误，方便排查问题。

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