如何解决如何使用 react.js 过滤 sanity.io 中的 API 数据?
您好,我是社区的新手,正在学习这里的工作方式。请试着通过我蹩脚的英语来理解。
假设 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;
解决方法
使用帖子设置您的状态后,您可以像这样访问数组中的随机帖子:
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
有了这个,您现在可以访问随机帖子并创建一个长度为 4 的新数组,或者您希望这样做
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。