0 

import { useParams } from 'react-router-dom';
import useFetch from './useFetch';

const BlogDetails = () => {
    const { id } = useParams();
    const { data: blog, error, isPending } = useFetch('http://localhost:3001/blogs/' + id);

    return (
        <div className="blog-details">
            { isPending && <div>...Loading...</div>}
            { error && <div>{error}</div>}
            { blog && (
                <article>
                    <h2>{blog.title}</h2>
                    <p>Written by {blog.author}</p>
                    <div>{blog.body}</div>
                </article>
            )}
        </div>
    );
}

export default BlogDetails;

import {useState, useEffect} from 'react';

const useFetch = (url) => {
        const [data, setData] = useState(null);
        const [isPending, setIsPending] = useState(true);
        const [error, setError] = useState(null);

    useEffect(() => {
        const abortCont = new AbortController();

        fetch(url, { signal: abortCont.signal })
            .then(res => {
                if(!res.ok){
                    throw Error('404 - data not found!');
                } 
                return res.json();
            })
            .then(data => {
                setData(data);
                setIsPending(false);
                setError(null);
            })
            .catch(err => {
                if (err.name === 'AbortError') {
                    console.log('fetch aborted');
                } else {
                    setIsPending(false);
                    setError(err.message);
                }
            })

            return () => abortCont.abort();
    }, [url]);

    return {data, isPending, error}
}

export default useFetch;

我对反应还很陌生，我花了大约 2 天的时间在 VSCode 上搜索、添加和删除包，但无济于事。

我正在关注网络忍者最近在 Youtube 上的教程，我被困在第 25 步。（https://www.youtube.com/watch?v=t7VmF4WsLCo&t=4s）

我已经完全复制了代码，但问题似乎在 React 的其他地方。

如果有人可以帮助或指出我正确的方向，将不胜感激。

这是我每次尝试访问该页面时出现的错误。对于不在主页上的任何页面都会抛出它。

4

0 回答 0