Json服务器数据在react中未正确获取

Question

我试图从本地json服务器中获取数据。

const {data, pending, error} = useFetch('http://localhost:8000/blogs');

这是正确的。但我试着在博客中获取数据

const { data: blog, error , pending} = UseFetch(http://localhost:8000/blogs/${id});

此代码段无法正常工作。当我运行这个代码时，它是这样运行的。此服务器地址不起作用。

http://localhost:3000/blogs/%201它来了"%201〃；到地址的末尾。但是我的内容"；id＝1"。

当我键入地址http://localhost:3000/blogs/1时，我的代码正在工作。

我正在寻求帮助。检查我的存储库

Answer 1

删除to="中的空格/路径名"；

<Link to={`/blogs/ ${blogs.id} `}>
<h2 className='header'>{ blogs.title }</h2>
<p>Written by { blogs.author } </p>
</Link>

到此

<Link to={`/blogs/${blogs.id}`}>
<h2 className='header'>{ blogs.title }</h2>
<p>Written by { blogs.author } </p>
</Link>

Answer 2

Fetch试图转义api地址中的一些字符，因此encodeURI(' 1')将为'%201'。

检查blog.id的值，它应该是数字，而不是字符串。