主页 / coding / 问题 / 79186040
Accepted
eskimopest
Asked: 2024-11-14 01:33:51 +0800 CST

当地图不返回任何值时显示消息

  • 772

我有 2 个数组类别和通知；

categorias 是这样的：

export const Categorias = [
  {
    id: 1,
    name: "actualidade",
    slug: "actualidade",
  },
...
]

而 noticias 是这样的：

export const Noticias = [
  {
    id: 1,
    titulo: "titulo da primeira notícia",
    slug: "titulo-da-primeira-notícia",
    texto:
      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.",
    img: "https://picsum.photos/id/0/5000/3333",
    cat: "politica",
    destaque: true,
  },
...
]

在主页上我有此代码，每个类别显示 4 条新闻：

{cats.map((item, index) => {
        return (
          <section className={`noticias ${item.name}`} key={index}>
            <div className="container">
              <div className="title">
                <h3>
                  {item.name}
                  <Link to={`/noticias/${item.slug}`}>
                    <p>ver todas</p>
                  </Link>
                </h3>
              </div>
            </div>

            <div className="blocks">
              {[...news]
                .reverse()
                .filter(
                  (noticia) =>
                    noticia.cat === item.slug && noticia.destaque !== true
                )
                .slice(0, 4)
                .map((noticia, idx) => {
                  return <BlockNoticia key={idx} item={noticia} id={idx} />;
                })}
            </div>
          </section>
        );
      })}

我故意留下一些没有新闻的类别，以便在没有新闻时显示一条消息。

除某个类别没有新闻外，此功能运行正常。

我怎样才能显示“此类别中没有新闻”这样的消息？

javascript

1 个回答

  1. Best Answer

    请注意带有注释的行。只有当新闻长度为零（或为空，但通常不应如此）时，才会显示该行。

    {cats.map((item, index) => {
        let filteredNews = [...news]
          .reverse()
          .filter((noticia) => noticia.cat === item.slug && noticia.destaque !== true)
          .slice(0, 4);
        return (
          <section className={`noticias ${item.name}`} key={index}>
            <div className="container">
              <div className="title">
                <h3>
                  {item.name}
                  <Link to={`/noticias/${item.slug}`}>
                    <p>ver todas</p>
                  </Link>
                </h3>
              </div>
            </div>

            <div className="blocks">
              {filteredNews.length ? (
                filteredNews.map((noticia, idx) => {
                  return <BlockNoticia key={idx} item={noticia} id={idx} />;
                })
              ) : (
                <p>No news in this category</p> /**Put any message you wan't here */
              )}
            </div>
          </section>
        );
      })}
    • 0

相关问题