如何通过id调用Rick and Morty API实现点击角色跳转Info页展示详情

具体修改步骤如下： #

1. 修正App组件的请求逻辑与路由配置

你需要将列表请求和详情请求拆分，同时修正请求URL的拼接错误，给Info路由增加动态id参数，修改后代码参考：

function App() {
  const [items, setItems] = useState([])
  const [info, setInfo] = useState([])
  const [isLoading, setIsLoading] = useState(true)
  const [query, setQuery]=useState('')
  const [page, setPage] = useState(1)
  // 删除原来的id state，不需要在全局维护选中id

  useEffect(() => {
    const fetchItems = async () => {
      // 修正URL拼接错误，删除id参数，列表请求不需要传id
      const result = await axios(`https://rickandmortyapi.com/api/character?page=${page}&name=${query}`)
      console.log("Character:", result.data.results)
      setItems(result.data.results)
      setInfo(result.data.info)
      setIsLoading(false)
    }
    fetchItems()
  }, [query, page]) // 把id从依赖项中移除

  const nextHandler = (event) => {
    event.preventDefault()
    if(page <= info.pages) {
      setPage(page + 1)
    }else {
      setPage(1)
    }
  }

  const prevHandler = (event) => {
    event.preventDefault()
    if(page>1){
      setPage(page - 1)
    }
  }

  return (
    <div className='container'>
      <Router>
        <Switch>
          <Route exact path='/' >
            <Header />
            <Search getQuery={(q) =>setQuery(q) } />
            <div className='pagination'>
              <button className='btn-prev' onClick={prevHandler}>Prev</button>
              <p className='number'>{page}/{info.pages}</p>
              <button className='btn-next' onClick={nextHandler}>Next</button>
            </div>
            <Character isLoading={isLoading} items={items} />
          </Route>
          {/* 给Info路由增加动态id参数 */}
          <Route path='/info/:id' component={Info} />
        </Switch>
      </Router>
    </div>
  )
}

2. 给CharacterItem增加点击跳转逻辑

点击角色卡片时跳转到对应id的详情页，修改后代码参考：

import { Link } from 'react-router-dom'
const CharacterItem = ({ item }) => {
  return (
    // 用Link包裹卡片，跳转路径带上当前角色的id
    <Link to={`/info/${item.id}`} style={{textDecoration: 'none'}}>
      <div className="card">
        <div className="card-header">
          <img src={item.image} alt='img' />
        </div>
        <div className="card-body">
          <h4>Name: {item.name}</h4>
          <p>Status:  {item.status}</p>
        </div>
      </div>
    </Link>
  )
}

3. 修正Info组件的请求与渲染逻辑

Rick and Morty API查询单个角色的规则是直接将id拼接在接口路径后，返回结果为单个角色对象，不存在results、info字段，修改后代码参考：

import { useParams } from 'react-router-dom'
const Info = () => {
  // 从路由参数中获取选中的角色id
  const { id } = useParams()
  const [character, setCharacter] = useState(null)
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    const fetchCharacter = async () => {
      setIsLoading(true)
      // 单个角色查询接口直接把id拼在路径后
      const result = await axios(`https://rickandmortyapi.com/api/character/${id}`)
      setCharacter(result.data)
      setIsLoading(false)
    }
    fetchCharacter()
  }, [id])

  if(isLoading) return <Spinner />

  return (
    <div>
      <div className="card-info">
        <div className="card-header-info">
          <img src={character.image} alt={character.name} />
        </div>
        <div className="card-body-info">
          <h4>Name: {character.name}</h4>
          <p>Gender: {character.gender}</p>
          <p>Status: {character.status}</p>
          <p>Species: {character.species}</p>
        </div>
      </div>
    </div>
  )
}

注：如果你使用的是React Router v6版本，只需将Switch替换为Routes、component={Info}替换为element={<Info />}即可，核心逻辑无需改动。

内容的提问来源于stack exchange，提问作者Darius