无需新增Strapi表，如何筛选Characters表区分团队与好友并解决报错

问题原因 #

1. 已定义的sortByDate、isFirend工具函数未被调用，两个板块都全量渲染所有数据，导致内容重复
2. 好友板块排序代码characters.sort(character.EndDate)中，character未在当前作用域定义，这是截图报错的直接原因
3. isFirend函数判断逻辑错误：new Date(undefined)返回的是Invalid Date而非null，无法正确识别好友条目，且函数名存在拼写错误
4. 团队板块未做过滤，将好友数据也一同渲染
5. 排序未传入自定义规则，默认按字典序排序，不符合按开始日期排序的需求

修复后完整代码 #

import Head from 'next/head'
import Layout from '../../components/Layout'
import styles from '../../styles/Home.module.css'
import fetchFromCMS from '../../lib/service';

import React from 'react';
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel';

export async function getStaticProps() {
  const characters = await fetchFromCMS('characters');
  return {
    props: { characters },
    revalidate: 1,
  };
}

// 按开始日期排序
function sortByDate(a, b) {
  return new Date(a.StartDate) - new Date(b.StartDate);
}
// 判断是否为好友：存在有效EndDate即为好友
function isFriend(a) {
  return !!a.EndDate;
}

const CharactersItem = ({ characters }) => {
  // 提前拆分数据 避免重复处理
  const teamMembers = characters.filter(item => !isFriend(item)).sort(sortByDate);
  const friends = characters.filter(isFriend).sort(sortByDate);

  return (
    <Layout>
      <div className={styles.container}>
        <Head>
          <title>Characters</title>
        </Head>

        <main className={styles.main} id="page-top">
          {/* 团队板块 */}
          <section className="bg-light page-section">
            <div className="container">
              <div className="row">
                <div className="col-lg-12 text-center">
                  <h2 className="section-heading text-uppercase">Our Amazing Team</h2>
                  <h3 className="section-subheading text-muted">Check out our fantastic team.</h3>
                </div>
              </div>
              <div className="row">
                {teamMembers.map((character) => (
                  <div className="col-sm-4" key={character.id}>
                    <a href={`/Team/${character.Slug}`}>
                      <div className="team-member">
                        <img className="mx-auto rounded-circle" src={character.Image.url} alt={character.PaineapleName}></img>
                        <h4 className="text-muted">{character.PaineapleName}</h4>
                      </div>
                    </a>
                  </div>
                ))}
              </div>
            </div>
          </section>
          
          {/* 好友板块 */}
          <section className="bg-light page-section">
            <div className="container">
              <div className="row">
                <div className="col-lg-12 text-center">
                  <h2 className="section-heading text-uppercase">Our Amazing Friends</h2>
                  <h3 className="section-subheading text-muted">Check out our fantastic friends.</h3>
                </div>
              </div>
              <div className="row">
                {friends.map((character) => (
                  <div className="col-sm-4" key={character.id}>
                    <a href={`/Team/${character.Slug}`}>
                      <div className="team-member">
                        <img className="mx-auto rounded-circle" src={character.Image.url} alt={character.PaineapleName}></img>
                        <h4 className="text-muted">{character.PaineapleName}</h4>
                      </div>
                    </a>
                  </div>
                ))}
              </div>
            </div>
          </section>
        </main>
      </div>
    </Layout>
  )
};

export default CharactersItem;

额外优化点 #

• 提前拆分团队、好友数据，避免在渲染逻辑中重复处理数组
• 为map渲染的列表项添加了key属性，避免React运行时警告
• 修复了好友板块副标题的文案错误
• 补全了图片的alt属性值，符合无障碍规范
• 修正了组件名首字母小写的不规范写法（React组件名需要大写开头）

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