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

我可以使用路由器和匹配的参数来实现，但是只能使用初始数据，如果我使用搜索功能，并且articlesData已更新，则该链接仍会获取初始数据，而不是搜索到的

我还必须说我在App组件上具有useEffect，当我转到另一个页面时会重置数据

Answer 1

在详细信息页面中，您不应使用列表索引来显示详细信息。

您应该使用数据的唯一属性来显示详细信息。例如：data：[{{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>
))

在详细页面中，按接收的代码值搜索

React.js显示列表的详细信息

1 个答案: