JavaScript/React中fetch请求Bing News API返回对象如何取值

核心错误原因 #

• response.json() 是异步方法，返回值为Promise对象而非接口实际返回的业务数据，直接将该Promise存入state无法读取到对应字段。
• React的状态更新方法setData是异步操作，调用完成后立刻访问data变量，拿到的还是当前渲染周期的旧值，首次调用时data初始值为undefined，因此直接报错。

代码修正 #

修改fetch请求的处理逻辑如下：

function fetchData() {
  fetch(
    "https://bing-news-search1.p.rapidapi.com/news?textFormat=Raw&mkt=en-WW&headlineCount=10&category=business",
    {
      method: "GET",
      headers: {
        "x-bingapis-sdk": "true",
        "x-rapidapi-host": "bing-news-search1.p.rapidapi.com",
        "x-rapidapi-key": "key",
      },
    }
  )
    .then((response) => response.json()) // 先完成json解析，拿到真实返回数据
    .then((resData) => {
      setData(resData); // 将真实数据存入state
      // 直接用解析后的resData访问字段即可
      console.log("返回的新闻列表数据：", resData.value);
    })
    .catch((err) => {
      console.error(err);
    });
}

页面渲染取值注意 #

如果要在组件的渲染逻辑中使用state里存储的数据，需要先做非空判断，避免初始状态为undefined时触发报错：

return (
  <div>
    {/* 可选链语法做非空判断，兼容初始无数据的情况 */}
    {data?.value?.map((newsItem) => (
      <div key={newsItem.name}>{newsItem.name}</div>
    ))}
  </div>
)

额外优化 #

你当前的useEffect没有传入依赖数组，会导致组件每次重渲染都新建定时器，存在内存泄漏风险，建议修改为：

useEffect(() => {
  const timer = setInterval(() => {
    fetchData();
  }, 3000);
  return () => clearInterval(timer);
}, []); // 传入空依赖数组，仅在组件挂载时初始化一次定时器

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