如何使用 react.js 过滤 sanity.io 中的 API 数据?
How to filter API data in sanity.io using react.js?
你好,我是社区的新手,正在学习这里的工作原理。请尝试通过我蹩脚的英语来理解。
假设API中有200条数据,但我只想将任意4条随机数据拉到前端。更清楚地说,数据是 sanity.io 在 React.js 中使用 groq ql 的博客文章。这是显示 API 中所有数据的代码。我试过 slice
功能但没有用。
const SideBarBlog = () => {
const [postData, setPost] = useState(null);
useEffect(() => {
sanityClient
.fetch(
`*[_type=="post"]{
title,
slug,
mainImage{
asset->{
_id,
url
},
alt,
}
}`
)
.then((data) => setPost(data))
.then((data) => console.log(postData))
.catch(console.error);
}, []);
return (
<>
{postData &&
postData.map((post, index) => (
<div className="row sidebar-blog mb-4 p-3" key={index}>
<div className="col-md-8">
{/* sideblog title */}
<p className="sidebolg-blogtitle mb-1">{post.title}</p>
</div>
</div>
))}
</>
);
};
export default SideBarBlog;
用 post 设置你的状态后,你可以访问数组中的随机 post,如下所示:
const postData = [{ post: "some post obj" }, { post: "another post obj" }, ];
const random = Math.floor(Math.random() * postsData.length);
postData[random] //this returns a random post
有了这个,您现在可以访问随机 posts 并创建一个长度为 4 的新数组,或者您希望这样做的方式
你好,我是社区的新手,正在学习这里的工作原理。请尝试通过我蹩脚的英语来理解。
假设API中有200条数据,但我只想将任意4条随机数据拉到前端。更清楚地说,数据是 sanity.io 在 React.js 中使用 groq ql 的博客文章。这是显示 API 中所有数据的代码。我试过 slice
功能但没有用。
const SideBarBlog = () => {
const [postData, setPost] = useState(null);
useEffect(() => {
sanityClient
.fetch(
`*[_type=="post"]{
title,
slug,
mainImage{
asset->{
_id,
url
},
alt,
}
}`
)
.then((data) => setPost(data))
.then((data) => console.log(postData))
.catch(console.error);
}, []);
return (
<>
{postData &&
postData.map((post, index) => (
<div className="row sidebar-blog mb-4 p-3" key={index}>
<div className="col-md-8">
{/* sideblog title */}
<p className="sidebolg-blogtitle mb-1">{post.title}</p>
</div>
</div>
))}
</>
);
};
export default SideBarBlog;
用 post 设置你的状态后,你可以访问数组中的随机 post,如下所示:
const postData = [{ post: "some post obj" }, { post: "another post obj" }, ];
const random = Math.floor(Math.random() * postsData.length);
postData[random] //this returns a random post
有了这个,您现在可以访问随机 posts 并创建一个长度为 4 的新数组,或者您希望这样做的方式