React - 当地图没有返回值时显示消息

Question

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

类别是这样的：

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

通知是这样的：

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>
        );
      })}

我故意留下了一些没有新闻的类别，这样当没有新闻时我可以显示一条消息。

除非类别中没有新闻，否则这工作正常。

如何显示“此类别没有新闻”之类的消息？

Answer 1

请注意注释行。这只会显示新闻长度是否为零（或无效，通常不应该是这种情况）。

{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} />;
                })}
                {!news.length?<p>No news in this category</p>:<></>} // feel free to modify this block as you like. 
            </div>
          </section>
        );
      })}