操纵 api 以显示来自单击元素的数据

Question

因此，我正在学习 React 并正在构建一个使用 Marvel api 来显示英雄信息的应用程序。现在我有一个页面显示所有英雄的图像和名字。我想知道如何操作 API，以便在单击英雄图片时将我带到包含 API 中包含的更多详细信息（描述、系列列表等）的页面。我可能必须为此使用状态，但我真的不知道如何处理这种情况。这是我得到的代码：import React, {useEffect, useState} from 'react';import "../App.css";import Heroes from './Heroes';const FetchApi = () =>{ const apikey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx'; const public_key = 'xxxxxxxxxxxxxxxxxxxxxxxxx' const md = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' const apiURL=`https://gateway.marvel.com:443/v1/public/charactersts=1&apikey=${public_key}&hash=${md}` const [heroes, setHeroes] = useState([])   useEffect (()=>{      getData();  },[])      const getData = async()=>{      const data = await fetch(apiURL)      const response = await data.json()      setHeroes(response.data.results)      console.log(response.data.results)  }  return(      <div className='App'>            <input type='text' className='search-bar'/>         <button className='search-button'>Search</button>             <div>          {heroes.map(hero =>(           <Heroes           image = {hero.thumbnail.path+'.jpg'}           title ={hero.name}          />       ))}          </div>               </div>  )}export default FetchApi;

Answer 1

首先，您需要在 Heros 映射组件上创建 onClick 事件，然后将其传递给 history，在 app.js 中推送和创建路由，然后将传递的路径作为 match.params。.....

 <div>{heroes.map(hero =>(

           <Heroes onClick={() => onHeroClick(hero)}

           image = {hero.thumbnail.path+'.jpg'}

           title ={hero.name}

          />

       ))}

          </div> 

const onHeroClick = (hero) => {    

//  hero must have a unique id/name here which u can pass to the link

history.push('/heros/' + hero.name)}

在 app.js 上

<Route path={'/hero/:heroname} />

在显示英雄详细信息的新组件上：

const Component2 = ({match}) => {

match.params.heroname = a unique id/name u sent withhistory.push('/heros/' + hero.name)

Answer 2

"Id like to know how can I manipulate the api ..."

我认为您需要为此查看 Marvel API 文档。

根据我的经验，API 通常带有特定的模式。举例来说，我们有一个图书馆书籍的 API：

1. 点击/booksURL 意味着您将获得图书馆中的所有书籍。结果肯定是array of objects. 就像你和英雄们所拥有的一样。

2. 点击/books/43URL 意味着您将获得某本书的详细信息。在这里，它的书 ID 等于 43。结果应该是一个对象，其中包含该书的所有信息。这就是您正在寻找的。

我没有使用也没有阅读过 Marvel API，但我相信它应该在文档中。

要在您的 React App 中实现它，您绝对可以使用Sushilzzz中的示例。

Answer 3

好吧，如果你想显示另一个关于英雄细节的页面，你可以通过路由 ex 传递英雄的名字：http://marvelheros/TonyStark 你可以通过编程重定向。 https://dev.to/projectescape/programmatic-navigation-in-react-3p1l

另一种方法是您可以使用弹出窗口来显示英雄详细信息