Как фильтровать данные API в sanity.io с помощью react.js?

Question

Здравствуйте, я новичок в сообществе и изучаю, как здесь все работает. Пожалуйста, попытайтесь понять через мой ломаный английский.

предположим, что в API 200 данных, но я просто хотел вытащить любые 4 случайных данных во внешний интерфейс. Для большей ясности данные - это сообщения в блоге из sanity.io с использованием groq ql в React.js. Вот код, который отображает все данные из API. я пытался функция, но не сработала.

      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;

Answer 1

После того, как вы установили состояние 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 или как вы хотите это сделать.