如何根据 nextJS 中 API 中的 ID 显示标题答案

【问题标题】：How to display the title according to the ID that is in the API in nextJS如何根据 nextJS 中 API 中的 ID 显示标题
【发布时间】：2022-06-14 17:14:29
【问题描述】：

我有一个问题，我只想根据ID显示“标题”。而是出现了所有“标题”。像下面的图片

我的代码 =

const getData = () => {
        const fetchArticle = profile.userId ? getNews : getAllNews;

        fetchArticle({ row: 10, page: 1 })
            .then((resolve) => {
                console.log(resolve);
                setNewsList(resolve.lists.map((news) => ({ ...news, news: news._id })));
            })
            .catch((reject) => {
                console.log(reject);
            });
    };

    useEffect(() => {
        getData();
    }, []);

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

谁能帮助我？如果我的问题的写作结构搞砸了，我很抱歉，因为我只是在学习编码。谢谢

【问题讨论】：

你能澄清一下问题吗？该图像是您期望的结果吗？
问题 = 我想根据它的 id 显示数据“标题”。例如，我打开网址 abc.com/1 然后出现标题 id 1。如果我打开 abc.com/2，则会出现标题 id 2。上图是问题所在，我打开 abc.com/1 显示所有标题数据。应该出现的是属于 id 1 的标题
你设置路线了吗？

标签： reactjs next.js

【解决方案1】：

您可以使用 useParams 挂钩从 URL 获取文章 ID。

所以，首先你需要为此创建一个路由（你可以在你的 App 组件中的某个地方这样做）：

function App() {
  // some code
  return (
      <Router>
          <Routes>
              <Route path=":articleId" element={<YourComponent />} />
          </Routes>
      </Router>
   );
}

注意react-router-dom应该安装并导入：

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

然后在您的文章组件中：

const { articleId } = useParams(); // make sure to import useParams from react-router-dom

// some code and your getData function

const currentNews = newsList.filter((news) => news._id == articleId)[0];

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

希望这会有所帮助。

【讨论】：