React.js获取API数据后无法在页面展示，求排查问题

核心问题 #

你控制台打印的API响应是数组格式（索引0、1对应博客对象），但代码里错误地判断response.items——API返回的直接是数组，并没有items这个嵌套属性，导致if条件不成立，setArticles从未执行，页面自然无法展示数据。

修正后的代码 #

export default function Article() {
  const { translate } = useLocales();
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    getArticles()
      .then((response) => {
        console.log(response);
        // 直接对返回的数组进行处理（先确认是数组）
        if (Array.isArray(response)) {
          const data = response.map((item) => ({
            img: item.image,
            title: item.title,
          }));
          setArticles(data);
        }
      })
      .catch((error) => {
        // 新增错误处理，排查请求异常
        console.error('获取文章失败:', error);
      });
  }, []);

  // 新增渲染逻辑，将articles渲染到页面
  return (
    <div className="articles-container">
      {articles.length > 0 ? (
        articles.map((article) => (
          <div key={article.id} className="article-card">
            <img src={article.img} alt={article.title} />
            <h3>{article.title}</h3>
          </div>
        ))
      ) : (
        <p>加载中...</p>
      )}
    </div>
  );
}

额外注意点 #

• 确认getArticles返回的直接是API响应数组，可通过console.log(typeof response, response)进一步验证类型。
• 渲染列表时必须给每个项加唯一key（优先用item.id，避免用索引或重复的title），消除React警告。
• 新增错误处理能快速排查网络问题、API返回格式异常等隐藏问题。

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