如何将获取的数据作为props传递给具有react-hooks的组件?

IT技术 javascript reactjs react-hooks
2021-05-20 12:16:21

我正在尝试使用来自 API 的数据创建一个组件,但我没有找到将数据作为props传递给我的“剧集”组件的方法。

这是代码:

应用程序.js

import React, { useState, useEffect } from 'react';


const url = 'https://swapi.co/api/films/'


function Episode(props){
  return (
    <div>
      {props.title}
      {props.release_date}
    </div>
  )
}


function App() {

  const [content, setContent] = useState(null)

  useEffect(async () => {
    const response = await fetch(url)
    const data = await response.json()
    const [...movies] = data.results
    setContent(movies)
  }, [])


  return (
    <div>
      {content && <Episode movie={content[0]}/>}
    </div>
  )

}

export default App;
1个回答

您的数据在movieprops中:

<Episode movie={content[0]}/>

因此,在您的组件中,您需要访问props.movie

function Episode(props){
  return (
    <div>
      {props.movie.title}
      {props.movie.release_date}
    </div>
  )
}