javascript 如何在ReactJS中根据slug取数据?

ntjbwcob  于 2023-03-11  发布在  Java
关注(0)|答案(2)|浏览(103)

我试图获取特定的博客根据鼻涕虫,但我得到了一个Axios错误404找不到。我真的很感激,如果任何人可以帮助。

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

const data = "https://bulkaccounts.com/api/blogs";
function Singleblog() {
  const { slug } = useParams();
  const [blog, setBlog] = useState({});
  const [isloading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
  const [items, setItems] = useState(null);

  useEffect(() => {
    const fetchBlogBySlug = async () => {
      setIsLoading(true);

      try {
        const res = await axios.get(`http://localhost:3000/blog/${slug}`);
        console.log({ res });
        if (res?.data?.data) {
          setBlog(res.data.data);
        } else {
          setError("Blog not found.");
        }
      } catch (error) {
        console.log(error);
        setError("Blog not found.");
      }

      setIsLoading(false);
    };

    fetchBlogBySlug();
  }, [slug]);

  let showData = "";
   showData = (
    <>
       <div className="blog">
        {data &&
          data.datas.data.map((item) => {
             return (
              <>
                <div className="flex-container">
                   <div className="card">hello</div>
                 </div>
              </>
             );
           })}
       </div>
     </>
   );

  return (
    <>
 {showData}
      <Link to="/">Home</Link>
    </>
  );
}

export default Singleblog;

// API = https://bulkaccounts.com/api/blogs
我试过那个代码但是它不为我工作.帮助我找出我的错误

3pmvbmvn

3pmvbmvn1#

首先,检查http://localhost:3000/blog是否是有效的后端服务器URL。
我认为用https://bulkaccounts.com/api/blogs替换http://localhost:3000/blog可以解决这个问题。

fjaof16o

fjaof16o2#

非常感谢你的帮助。我得到了我的答案,实际上我犯了一个愚蠢的错误。我在“博客”中存储数据,但在代码中我试图Map“数据”。

相关问题