如何通过主题标签过滤和排列推文?

How to filter and array of tweets by a hastag?

我在页面上列出了一组推文对象。我在单独的 HTML 元素中显示所有推文的所有主题标签。当用户点击主题标签时,我希望它能过滤我的推文数组,只显示带有点击标签的推文。

这是数组中的推文对象之一:

{
  "created_at": "Mon Dec 06 14:13:27 +0000 2021",
  "id": 1467859736775344000,
  "id_str": "1467859736775344128",
  "text": "JUST IN – Professional soccer player receives world’s first #Bitcoin Lightning payroll payment  https://...",
  "truncated": false,
  "entities": {
    "hashtags": [
      {
        "text": "Bitcoin",
        "indices": [
          60,
          68
        ]
      }
    ],
    "symbols": [],
    "user_mentions": [],
    "urls": [],
    "media": [
      {
        "id": 1467859588900925400,
        "id_str": "1467859588900925448",
        "indices": [
          97,
          120
        ],
        "media_url": "http://pbs.twimg.com/media/FF7ihOCXMAgPCed.jpg",
        "media_url_https": "https://pbs.twimg.com/media/FF7ihOCXMAgPCed.jpg",
        "url": "https://...",
        "display_url": "pic.twitter.com/CYScG5iUm9",
        "expanded_url": "https://twitter.com/BitcoinMagazine/status/1467859736775344128/photo/1",
        "type": "photo",
        "sizes": {
          "small": {
            "w": 680,
            "h": 481,
            "resize": "fit"
          },
          "thumb": {
            "w": 150,
            "h": 150,
            "resize": "crop"
          },
          "large": {
            "w": 1966,
            "h": 1390,
            "resize": "fit"
          },
          "medium": {
            "w": 1200,
            "h": 848,
            "resize": "fit"
          }
        }
      }
    ]
  },
  "extended_entities": {
    "media": [
      {
        "id": 1467859588900925400,
        "id_str": "1467859588900925448",
        "indices": [
          97,
          120
        ],
        "media_url": "http://pbs.twimg.com/media/FF7ihOCXMAgPCed.jpg",
        "media_url_https": "https://pbs.twimg.com/media/FF7ihOCXMAgPCed.jpg",
        "url": "https://...",
        "display_url": "pic.twitter.com/CYScG5iUm9",
        "expanded_url": "https://twitter.com/BitcoinMagazine/status/1467859736775344128/photo/1",
        "type": "photo",
        "sizes": {
          "small": {
            "w": 680,
            "h": 481,
            "resize": "fit"
          },
          "thumb": {
            "w": 150,
            "h": 150,
            "resize": "crop"
          },
          "large": {
            "w": 1966,
            "h": 1390,
            "resize": "fit"
          },
          "medium": {
            "w": 1200,
            "h": 848,
            "resize": "fit"
          }
        }
      }
    ]
  },
  "metadata": {
    "result_type": "popular",
    "iso_language_code": "en"
  },
  "source": "<a href=\"https://mobile.twitter.com\" rel=\"nofollow\">Twitter Web App</a>",
  "in_reply_to_status_id": null,
  "in_reply_to_status_id_str": null,
  "in_reply_to_user_id": null,
  "in_reply_to_user_id_str": null,
  "in_reply_to_screen_name": null,
  "user": {
    "id": 361289499,
    "id_str": "361289499",
    "name": "Bitcoin Magazine",
    "screen_name": "BitcoinMagazine",
    "location": "Nashville, TN",
    "description": "The Most Trusted Voice In #Bitcoin• Conference  https://... \n• Watch  https://...• Learn ⚡️https://...",
    "url": "https://...",
    "entities": {
      "url": {
        "urls": [
          {
            "url": "https://...",
            "expanded_url": "http://BitcoinMagazine.com",
            "display_url": "BitcoinMagazine.com",
            "indices": [
              0,
              23
            ]
          }
        ]
      },
      "description": {
        "urls": [
          {
            "url": "https://...",
            "expanded_url": "http://b.tc/conference",
            "display_url": "b.tc/conference",
            "indices": [
              49,
              72
            ]
          },
          {
            "url": "https://...",
            "expanded_url": "http://b.tc/youtube",
            "display_url": "b.tc/youtube",
            "indices": [
              84,
              107
            ]
          },
          {
            "url": "https://...",
            "expanded_url": "http://b.tc/21days",
            "display_url": "b.tc/21days",
            "indices": [
              118,
              141
            ]
          }
        ]
      }
    },
    "protected": false,
    "followers_count": 1737059,
    "friends_count": 635,
    "listed_count": 11533,
    "created_at": "Wed Aug 24 15:14:54 +0000 2011",
    "favourites_count": 20000,
    "utc_offset": null,
    "time_zone": null,
    "geo_enabled": true,
    "verified": true,
    "statuses_count": 19049,
    "lang": null,
    "contributors_enabled": false,
    "is_translator": false,
    "is_translation_enabled": false,
    "profile_background_color": "000000",
    "profile_background_image_url": "http://abs.twimg.com/images/themes/theme1/bg.png",
    "profile_background_image_url_https": "https://abs.twimg.com/images/themes/theme1/bg.png",
    "profile_background_tile": false,
    "profile_image_url": "http://pbs.twimg.com/profile_images/1444022922377576453/AzvXYXGr_normal.jpg",
    "profile_image_url_https": "https://pbs.twimg.com/profile_images/1444022922377576453/AzvXYXGr_normal.jpg",
    "profile_banner_url": "https://pbs.twimg.com/profile_banners/361289499/1628624645",
    "profile_link_color": "FFA207",
    "profile_sidebar_border_color": "000000",
    "profile_sidebar_fill_color": "000000",
    "profile_text_color": "000000",
    "profile_use_background_image": false,
    "has_extended_profile": false,
    "default_profile": false,
    "default_profile_image": false,
    "following": null,
    "follow_request_sent": null,
    "notifications": null,
    "translator_type": "regular",
    "withheld_in_countries": []
  },
  "geo": null,
  "coordinates": null,
  "place": null,
  "contributors": null,
  "is_quote_status": false,
  "retweet_count": 386,
  "favorite_count": 2612,
  "favorited": false,
  "retweeted": false,
  "possibly_sensitive": false,
  "lang": "en"
}

主题标签存储在一个带有文本字段的数组中。但是,我不知道如何通过主题标签中的文本字段进行过滤。

这是我的函数,它接受一组推文,但它目前只返回一组过滤的主题标签,而不是推文本身:

  const filterTweetsByHashtag = (hashtag: string) => {
    setOriginalTweets(tweets);
    const filteredTweets = tweets.filter((tweet: any) => {
      const hashtags = tweet.entities.hashtags;
      return hashtags.some((hashtag: any) => hashtag.text === hashtag);
    });
    setTweets(filteredTweets);
  };

我不确定哪里出错了,我可以很好地过滤字符串和数字,但是当涉及到在数组中过滤数组时,我完全迷路了。任何额外的见解将不胜感激!

你没有得到结果是因为你的变量名:

你可以看看下面这段代码:

return hashtags.some((hashtag: any) => hashtag.text === hashtag);

根据上面的代码,您的 hashtag.texthashtagshashtag 进行比较,而不是您提供的 hashtag

也许你可以试试这个:

return hashtags.some((h: any) => h.text === hashtag);

滤体正确。您正在隐藏主题标签变量,因此您的 some 函数使用了错误的变量。