Next.js中如何使用.map()跳过API返回的空字段？

问题分析 #

你的代码存在两处问题导致需求未实现：

1. 字段名不匹配：API返回的项目链接字段是html_link，但组件中错误使用了html_url，不仅会导致该字段显示异常，也可能间接影响其他逻辑的预期表现。
2. 空值判断不够健壮：虽然repo.homepage !== ''能判断空字符串，但如果API返回null或undefined，该条件会失效，无法隐藏元素。

修复后的代码 #

import useSWR from 'swr';

import fetcher from 'lib/fetcher';
import type { Repos } from 'lib/types';

export default function ProjectsCard() {
  const { data, error } = useSWR<Repos>('/api/repo', fetcher);

  if (error) {
    return <div>加载失败</div>;
  }
  if (!data) {
    return <div>加载中...</div>;
  }

  return (
    <>
      {data.myrepo.map((repo, index) => (
        <div key={index} className="mb-8">
          <p className="text-gray-900 font-medium">
            1. 项目名称: {repo.name}
          </p>

          <p className="text-gray-900 font-medium">
            2. 项目描述: {repo.description}
          </p>

          <p className="text-gray-900 font-medium">
            3. 项目链接: {repo.html_link}
          </p>

          {repo.homepage && (
            <p className="text-gray-900 font-medium">
              4. 项目主页: {repo.homepage}
            </p>
          )}

          <p className="text-gray-900 font-medium">
            5. 项目语言: {repo.language}
          </p>
        </div>
      ))}
    </>
  );
}

关键修改说明 #

• 修正项目链接的字段名，确保数据正确渲染。
• 将空值判断简化为repo.homepage，利用JavaScript的真值特性，自动过滤空字符串、null、undefined等空值情况，彻底实现空字段元素的隐藏。

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