React.js 顯示列表的詳細信息

Question

如何實現從搜索功能中顯示詳細頁面？

例如，我將 API 調用中的數據呈現在列表中，但隨后我想點擊“更多”鏈接並顯示所選列表的詳細頁面

示例鏈接： https : //master.d1y6j5rvhgf8yj.amplifyapp.com/使用初始數據它可以工作，但在我搜索后它仍然直接指向初始數據

const findArticlesQuery = (query) => {
 axios.get(url)
  .then(res => {                
   [res.data].map((val) =>(        
     setArticleData(val.articles)        
   ))                                     
   }).catch(error => {
       console.log(error.response)
   });
 }

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

然后我有文章列表但不確定如何創建詳細頁面，

<ArticleListItem articlesData={articleData}/> 

const articleDataItem = articlesData.map((value, idx)=> (   
  <li key={idx} className="collection-item">
    <span>{value.title}</span>
    <a href={`/article/${idx}`}>More</a>     <--- I want to use this button to show detailed info            
  </li>
))   

我可以使用路由器和匹配參數來實現這一點，但只能使用初始數據，如果我使用搜索功能並且文章數據已更新，則鏈接仍將獲得初始數據而不是搜索到的數據

我還必須說，我在 App 組件上有 useEffect，它在我轉到另一個頁面時重置數據

Answer 1

在詳細信息頁面中，您不應該使用列表索引來顯示詳細信息。

您應該使用數據的唯一屬性來顯示詳細信息。 示例：數據：[{code: 'abc', title: '...'}, {code: '', title: ''}...]

const articleDataItem = articlesData.map((value, idx)=> (   
  <li key={value.code} className="collection-item">
    <span>{value.title}</span>
    <a href={`/article/${value.code}`}>More</a>     <--- I want to use this button to show detailed info            
  </li>
))

在詳情頁，按收到的代碼值搜索