Reactjs 如何使用react.js过滤sanity.io中的API数据？

你好，我是新加入社区的，在这里学习如何工作。请试着通过我蹩脚的英语来理解

假设API中有200个数据，但我只想将任意4个随机数据拉到前端。更清楚的是，这些数据是使用React.js中的groq ql从sanity.io发布的博客文章。下面是显示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 SideBarBlog=（）=>{
const[postData，setPost]=useState（null）；
useffect（（）=>{
消毒剂
.取回(
`*[\u type==“post”]{
标题
鼻涕虫
主图像{
资产->{
_身份证，
网址
},
中高音，
}
}`
)
.然后（（数据）=>setPost（数据））
.then（（数据）=>console.log（postData））
.catch（控制台错误）；
}, []);
返回(
{postData&&
postData.map（（post，index）=>(
{/*侧博客标题*/}
{post.title}
))}
);
};
导出默认边栏日志；

使用帖子设置ur状态后，您可以访问数组中的随机帖子，如下所示：

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的新数组，或者按照您的意愿在

中创建。然后（（数据）=>setPost（数据））

，您可以在

setPost

之前执行任何操作