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>
))

在详情页，按收到的代码值搜索