NextJS中如何根据API返回的ID匹配展示对应新闻标题

你的代码没有实现「按指定ID匹配对应条目」的过滤逻辑：接口返回全量列表后你直接把所有数据存入了newsList状态，渲染时也没有做筛选，直接遍历整个数组输出所有内容，自然会把所有条目的title都渲染出来。
除此之外你的代码还有几个容易引发bug的写法问题：

• 列表遍历时把Array.map的第二个参数（数组下标）命名为_id，这个值不是数据本身的唯一ID，作为组件key会导致渲染异常
• 处理接口返回值时写的{ ...news, news: news._id }属于无意义的字段冗余，额外加的news字段命名语义混乱，后续维护很容易踩坑
• 列表项外层包裹的空Fragment<>是多余代码，可以直接删掉
• 最外层的return没有包裹根元素，不符合JSX语法要求

1. 如果你需要在前端侧筛选匹配ID的内容，在拿到接口返回值后先加过滤逻辑，只保留ID符合要求的条目再存入状态；如果你的getNews接口支持传入目标ID作为请求参数，优先在请求时就把ID传给后端，让接口直接返回目标数据，减少前端处理成本。
2. 修正列表渲染的错误写法，用数据本身的_id作为key，删掉多余的冗余代码。

修正后的参考代码：

// 替换成你实际要匹配的目标ID，比如从路由参数、props中获取的文章ID
const targetNewsId = "你的目标文章ID";

const getData = () => {
  const fetchArticle = profile.userId ? getNews : getAllNews;
  // 如果接口支持传ID筛选，直接把targetNewsId加在请求参数里即可
  fetchArticle({ row: 10, page: 1 })
    .then((res) => {
      console.log(res);
      // 过滤出ID匹配的条目，如果接口已经返回的是匹配后的数据可以省略filter这步
      const filterList = res.lists.filter(item => item._id === targetNewsId);
      setNewsList(filterList);
    })
    .catch((err) => {
      console.log(err);
    });
};

useEffect(() => {
  getData();
  // 如果targetNewsId是动态值，需要加入useEffect依赖数组
}, [targetNewsId]);

return (
  <>
    {newsList.map((news) => {
      return (
        <div key={news._id}>
          <h2>{news.title}</h2>
          <p className={styles.publish}>Published On: {news.createdAt}</p>
          <p>{news.content}</p>
        </div>
      );
    })}
  </>
);

提示：如果你期望的是点击某条新闻的ID再展示对应title，而不是页面加载就只展示单条，那不需要在请求的时候过滤，只需要在点击事件里记录当前选中的ID，渲染时判断当前条目ID和选中ID一致时再展示title即可。

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