如何在 React 的頁面上顯示博客詳細信息？

Question

我是新來的反應。 在離開科技領域很長一段時間后，我正在學習 Java。 我會感謝你的幫助。

我應該如何在此代碼中更正博客將在頁面上返回（顯示）帖子、標題、作者、正文、日期等？

謝謝你。

BlogDetail.js

import React, { useState, useEffect } from "react";
import axios from "axios";
import { Link } from "react-router-dom";

function BlogDetail() {
  const [setBlogs] = useState([]);

  useEffect(() => {
    const fetchBlogs = async () => {
      try {
        const res = await axios.get(`http://localhost:8000/api/blog/`);
        setBlogs(res.data);
      } catch (err) {}
    };

    fetchBlogs();
  }, []);

  return (BlogPost) => (
    <div className="container-m-3">
      <article>
        <Link to={`/blog/${BlogPost.slug}`} className="stretched-link">
          {BlogPost.title}
        </Link>
        <h1 className="display-2">{BlogPost.title}</h1>
        <h2 className="text-muted mt-3">
          Category: {capitalizeFirstLetter(BlogPost.category)}
        </h2>
        <h4>
          {BlogPost.month} {BlogPost.day}
        </h4>
        <p>Written by {BlogPost.author}</p>
        <div>{BlogPost.body}</div>
        <hr />
        <p className="lead mb-5">
          <Link
            to="http://localhost:8000/api/blog/"
            className="font-weight-bold"
          >
            Front Page
          </Link>
        </p>
      </article>
    </div>
  );
}

const capitalizeFirstLetter = (word) => {
  if (word) return word.charAt(0).toUpperCase() + word.slice(1);
  return "";
};

export default BlogDetail;

它是一個帶有路由器/元素位置的 app.js。

應用程序.js

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Layout from './hocs/Layout';
import Home from './components/Home';
import Blog from './components/Blog';
import BlogDetail from './components/BlogDetail';
import Category from './components/Category';

const App = () => (
    <Router>
        <Layout>
            <Routes>
                <Route path='/' element={<Home/>} />
                <Route path='/blog' element={<Blog/>} />
                <Route path='/blog/:id' element={<BlogDetail/>} />
                <Route path='/category/:id' element={<Category/>} />
            </Routes>
        </Layout>
    </Router>
);

export default App;

Answer 1

您的代碼非常接近，但我在下面做了一些調整。 我看到兩個主要問題：1）您需要指定將保存博客的狀態變量和 2）然后您需要從 api 循環瀏覽博客並呈現它們中的每一個。

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';


    function BlogDetail() {
        // blogs is the data, setBlogs is a function that sets the value of blogs
        const [ blogs, setBlogs ] = useState([]);
        

        useEffect(() => {
            const fetchBlogs = async () => {
                try {
                    const res = await axios.get(`http://localhost:8000/api/blog/`);
                    setBlogs(res.data);
                }
                catch (err) {
    
                }
            }
    
            fetchBlogs();   
        }, []);
    

    return (
        <div className="container-m-3">
          {blogs.map((BlogPost, index) => (
            <article key={index}>
                <Link to={`/blog/${BlogPost.slug}`} className="stretched-link">{BlogPost.title}</Link>
                <h1 className='display-2'>{BlogPost.title}</h1>
                <h2 className='text-muted mt-3'>Category: {capitalizeFirstLetter(BlogPost.category)}</h2>
                <h4>{BlogPost.month} {BlogPost.day}</h4>
                <p>Written by {BlogPost.author}</p>
                <div>{BlogPost.body}</div>
                <hr />
                <p className='lead mb-5'><Link to='http://localhost:8000/api/blog/' className='font-weight-bold'>Front Page</Link></p>
            </article>
           )}
        </div>              
    );


};

    const capitalizeFirstLetter = (word) => {
        if (word)
            return word.charAt(0).toUpperCase() + word.slice(1);
        return '';
    };
    
    

export default BlogDetail;