React JS API 获取数据时如何按类型对数据进行排序

Question

这与使用 MERN 堆栈开发的广告网站有关。

我想按广告类型“reach-up-ad”对数据进行排序，并显示该广告类型下方的所有其他广告。通过axios获取数据，然后根据需要进行映射、排序或过滤。

示例：

• 到达广告
• 未付费广告
• 未付费广告
• 未付费广告 ......

付费广告应始终显示在列表顶部。

如何在我的 Nextjs 代码上实现此功能？

代码：

const fetchPosts = async () => {
    try {
        const { data } = await getPosts();
        const filterData = await data?.filter(obj => obj.adPromote == "free-ad" || obj.adPromote == "reach-up-ad")
        .map(obj => {
            return {
                ...obj,
                adImg: obj.photos[0] || 'https://dummyimage.com/600x400/dbdbdb/dbdbdb',
                title: `${obj.title} (${obj.features.condition})`,
                location: `Posted On ${new Date(obj.createdAt).toDateString()}, ${obj.location.district}, ${obj.location.location} `,
                price: obj.price,
                cardTag: 'toItem',
                totalTime: timeSince(obj.createdAt),
                district: obj.location.district
            }
        });

        setNoOfPages(Math.ceil(filterData?.length / itemsPerPage))
        setPosts(filterData)
    } catch (err) {
        console.log(err)
    }
}

Answer 1

您可以使用下面的代码，您只需要根据您的类型进行排序。

useEffect(() => {
    // Fetch the data from your backend API
    axios.get('/api/ads')
      .then(response => {
        // Sort the data by ad type
        const sortedAds = response.data.sort((a, b) => {
          if (a.type === 'paid ad' && b.type !== 'paid ad') {
            return -1;
          } else if (a.type !== 'paid ad' && b.type === 'paid ad') {
            return 1;
          }
          return 0;
        });

        setAds(sortedAds);
      })
      .catch(error => {
        console.error('Error fetching ads:', error);
      });
  }, []);