// src/article/index.js

import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
 
function BlogList() {
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    // 替换为你真实的api url
    axios.get('http://your-api-url/articles')
      .then(response => {
        // 调试语句
        console.log(response.data);
        // 根据数据结构设置正确的字段
        setArticles(response.data.articles);
      })
      .catch(error => {
        console.error("请求错误:", error);
      });
  }, []);

  return (
    <div>
      <h2>美亿的博客</h2>
      {Array.isArray(articles) && articles.map(article => (
        <div key={article.id}>
          <div>
            // 这里设置了点击文章的标题/时间，可以直接跳转到该文章的详情页面
            <Link to={`/articles/${article.id}`}>
              <p>
                {article.created_at}&nbsp;&nbsp;&nbsp;
                {article.title}
             </p>
           </Link>
         </div>
        </div>
      ))}
    </div>
  );
}

export default BlogList;