如何使用JavaScript & React从API中筛选最新的3条数据

1. 确认数据格式有效性 #

先确保你的createdAt字段是可直接用于排序的格式，比如ISO 8601字符串（如"2024-05-20T12:30:00Z"）或数字类型的时间戳，这两种格式能直接通过Date对象或数值大小完成比较。

2. 对数据数组降序排序 #

拿到数据后，通过Array.sort()对数组按createdAt降序排列（最新数据排在最前）：

// 假设原始数据数组为dataList
const sortedData = [...dataList].sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));

• 使用[...dataList]创建数组副本，避免修改原数组的原始顺序
• 降序逻辑：用b.createdAt对应的时间减去a.createdAt，确保新数据优先排在前面

3. 截取前3条数据 #

排序完成后，用Array.slice()提取前3个元素：

const latestThree = sortedData.slice(0, 3);

4. 在React组件中渲染展示 #

将处理后的latestThree数组映射渲染到页面：

function LatestDataComponent() {
  const [latestData, setLatestData] = useState([]);

  useEffect(() => {
    // 模拟从API拉取数据
    fetch('/your-api-endpoint')
      .then(res => res.json())
      .then(rawData => {
        // 排序并截取前3条
        const sorted = [...rawData].sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
        setLatestData(sorted.slice(0, 3));
      })
      .catch(err => console.error('数据获取失败:', err));
  }, []);

  return (
    <div className="latest-data-container">
      <h3>最新3条数据</h3>
      {latestData.map(item => (
        <div key={item.id} className="data-card">
          <p>内容: {item.content}</p>
          <p>创建时间: {new Date(item.createdAt).toLocaleString()}</p>
        </div>
      ))}
    </div>
  );
}

常见问题排查 #

• 若排序无效，检查createdAt字段格式：如果是自定义字符串（如"2024/05/20"），需先转换为Date对象再做比较
• 确认API返回的字段名无拼写错误（比如误写为createAt）
• 也可以在后端直接完成排序和截取（比如MongoDB用sort({createdAt: -1}).limit(3)），减少前端处理压力

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