React调用hn.algolia接口后无法渲染返回数据的title字段如何解决

• 接口返回结构认知错误：hn.algolia的搜索接口返回的根对象data中，真正的新闻内容列表存储在data.hits字段的数组里。你使用Object.keys(data)遍历的是根对象的属性名集合（类似hits、nbHits、page等字符串值），字符串本身不存在title、url等属性，所以处理得到的stories数组内所有对象的字段值都是undefined，自然无法渲染出内容。
• 写法不规范：代码中同时混用async/await和.then链式调用，虽然不影响功能，但可读性差，建议统一使用其中一种写法。

直接遍历data.hits数组处理数据即可，同时补充错误捕获逻辑和列表渲染的key属性，避免控制台抛出警告。修复后的完整代码如下：

import { useState, useEffect } from 'react';

function News() {
  const [stories, setStories] = useState([]);

  useEffect(() => {
    const getStoriesData = async () => {
      try {
        const response = await fetch("https://hn.algolia.com/api/v1/search_by_date?tags=(story,poll)");
        const data = await response.json();
        // 直接遍历内容列表数组
        const processedStories = data.hits.map((story) => ({
          title: story.title,
          url: story.url,
          points: story.points,
        }));
        setStories(processedStories);
      } catch (err) {
        console.error('请求数据失败:', err);
      }
    }

    getStoriesData();
  }, []);

  return(
    <div className="news">
      {stories.map((story, index) => (
        <p key={index}>{story.title}</p>
      ))}
      <h1>this is news</h1>
    </div>
  )
}

export default News;

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