React中分类无新闻时如何显示提示信息？

核心逻辑 #

• 遍历Categorias数组，针对每个分类筛选出destaque: false的非头条新闻
• 对筛选结果做截断，最多保留4条
• 根据筛选结果的长度，判断渲染新闻列表还是空状态提示

完整代码示例 #

import React from 'react';

// 模拟业务数据（实际项目中可从接口获取）
const Categorias = [
  { id: 1, nome: '科技' },
  { id: 2, nome: '娱乐' },
  { id: 3, nome: '体育' },
  { id: 4, nome: '财经' },
];

const Noticias = [
  { id: 1, titulo: 'AI大模型落地医疗场景', categoriaId: 1, destaque: false },
  { id: 2, titulo: '年度票房冠军影片官宣续集', categoriaId: 2, destaque: false },
  { id: 3, titulo: '国足世预赛客场取胜', categoriaId: 3, destaque: true }, // 头条新闻，会被过滤
  { id: 4, titulo: '国产芯片制程突破', categoriaId: 1, destaque: false },
  { id: 5, titulo: '顶流歌手开启世界巡演', categoriaId: 2, destaque: false },
  { id: 6, titulo: '新能源车企Q3营收翻倍', categoriaId: 1, destaque: false },
];

const HomePage = () => {
  return (
    <div className="home-page">
      {Categorias.map((categoria) => {
        // 筛选当前分类下的非头条新闻，最多取4条
        const targetNews = Noticias.filter(
          item => item.categoriaId === categoria.id && !item.destaque
        ).slice(0, 4);

        return (
          <section key={categoria.id} className="category-block">
            <h2>{categoria.nome}</h2>
            {targetNews.length === 0 ? (
              <p className="empty-tip">该分类暂无新闻</p>
            ) : (
              <ul className="news-list">
                {targetNews.map(news => (
                  <li key={news.id} className="news-item">{news.titulo}</li>
                ))}
              </ul>
            )}
          </section>
        );
      })}
    </div>
  );
};

export default HomePage;

关键细节说明 #

• 数据筛选：用filter匹配分类ID和非头条状态，slice(0,4)控制展示数量
• 空状态处理：通过判断筛选结果的长度，切换渲染内容，保证无新闻分类的提示友好
• 列表key：遍历数组时添加唯一key，满足React列表渲染的性能优化要求

内容的提问来源于stack exchange，提问作者eskimopest