React如何实现指定分类下所有博客文章的完整展示

你当前代码无法展示全部分类文章的核心原因有2点：

• 使用了Array.find()查询匹配文章，该方法仅会返回第一个符合判断条件的元素，不会返回所有匹配分类的文章集合
• 仅写了单个文章的渲染结构，没有对匹配到的多篇文章做循环遍历输出

1. 把单条匹配的find()方法替换为Array.filter()，该方法会返回所有符合分类条件的文章组成的数组
2. 使用Array.map()遍历筛选得到的文章数组，逐篇渲染文章卡片
3. 如果你要让这个组件支持通过路由参数动态匹配不同分类，可以直接使用useParams()拿到的category值做筛选判断，不需要硬编码分类字符串；另外你的JSON数据里没有cost字段，原代码里的价格渲染会输出undefined，可以根据实际数据调整。

import React from 'react';
import { Link, useParams } from "react-router-dom";

export default function ShortStories ({ posts, setCart, cart }) {
  const { category } = useParams();
  // 筛选所有匹配分类的文章，要动态匹配路由参数可以改成 post.category === category
  // 固定只展示SHORT_STORIES分类保留硬编码即可
  const matchedPosts = posts.filter(post => post.category === "SHORT_STORIES");

  return (
    <>
      <h1>Short Stories</h1>
      <Link to="/ShortStories"><button type="button">Short Stories</button></Link>
      <Link to="/KentBased"><button type="button">Kent Based</button></Link>
      <Link to="/Blog"><button type="button">All</button></Link>

      <div className="products">
        {/* 遍历所有匹配到的文章逐篇渲染 */}
        {matchedPosts.map(post => (
          <div className="product" key={post.id}>
            <h3>{post.name}</h3>
            {/* 你的JSON数据里没有cost字段，这行不需要可以删掉，或者补充对应数据 */}
            {/* <h4>£{post.cost}</h4> */}
            <img src={post.image} alt={post.name} />
            <br />
            <Link to={`/SingleBlog/${post.id}`}>
              <button type="button">View Post</button>
            </Link>
          </div>
        ))}
      </div>
    </>
  );
}

• 遍历渲染列表时一定要给最外层元素加唯一的key属性，这里用每篇文章的id作为key值即可，避免React渲染警告和状态异常
• 如果后续要复用这个组件展示KentBased等其他分类，只需要把filter的判断条件改成和路由参数category对应即可，不需要为每个分类单独写页面组件

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