javascript - FetchError:无效的 json 响应正文,原因:意外的令牌 < 在 JSON 中的位置 0
问题描述
我正在尝试在我的下一个项目中显示单个博客页面。
我在 getStaticProps 收到错误
我尝试将来自 api 的数据设为数组,但它也不起作用,我不知道这段代码的问题在哪里,一切看起来都很好
我不知道是来自 api 的错误还是其他原因。
import { useRouter } from 'next/router';
import Link from 'next/link';
import BlogsStyle from '../../../styles/Blogs.module.css';
import { Image } from "react-bootstrap";
const Blog = ({ blog }) => {
const router = useRouter()
const {id} = router.query
return (
<div>
<div className={BlogsStyle.blogItem}>
<div className={BlogsStyle.blogImg}>
<Image className={BlogsStyle.blogImgSrc} src={blog.image_url} alt="image blog" onError={(e)=>{e.target.onerror = null; e.target.src="../../public/images/default_blog.png"}} fluid />
</div>
<div className=" blog__item--text">
<div className="info">
<div className="date">{blog.publish_date}</div>
<h6>{blog.title.ar}</h6>
<p>{strip(blog.content.ar).substring(0,100)}</p>
</div>
</div>
</div>
</div>
)
}
export const getStaticPaths = async () => {
const res = await fetch('https://masahefapi.slsal.co/pgarticles/articles/0/10');
const data = await res.json();
console.log(data);
const paths = await data.map(blog =>{
return {
params: { id: blog.id.toString() }
}
})
return {
paths,
fallback: false
}
}
export const getStaticProps = async({ params }) => {
const id = context.params.id;
const res = await fetch(`https://masahefapi.slsal.co/pgarticles/articles/0/10/${params.id}`);
const data = await res.json();
console.log(data);
return {
props: {
blog: data
}
}
}
export default Blog
解决方案
推荐阅读
- c - 递归释放循环单链表?
- pyspark - Pyspark - 从数组中删除所有字母元素
- c - 如何将一串二进制数转换为 C 中的字符(每个字符都必须有一个半字节)?
- c - 堆栈指针的内存分配
- javascript - 如何通过一键单击将多个产品添加到 Shopify 购物车
- python - 我应该用哪个名称保存裁剪的文本图像文件,以便我可以将这些连同其基本事实转录一起提供?
- api - Sharepoint Online 从 Linux 创建文件夹
- excel - VBA 返回 1004:对象全局范围失败
- flutter - 注销和登录会导致同步问题。解释?
- cuda - 如何格式化 CUBLAS 例程 cublasdtbsv 的 A 矩阵?