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

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 时，我的代码正在运行。

我正在寻求帮助。检查我的 Repository

Answer 1

从 to="/pathname" 中删除空格

 <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

获取试图转义 api 地址中的某些字符，因此 encodeURI(' 1') 将是 '%201'。

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

Json server Data is not Fetching Correctly in react