Javascript 如何将获取的数据作为道具传递给具有react挂钩的组件？

我试图用API中的数据创建一个组件，但我没有找到一种方法将数据作为道具传递给我的“插曲”组件

代码如下：

App.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;

import React，{useState，useffect}来自“React”；
常量url=https://swapi.co/api/films/'
功能集（道具）{
返回(
{props.title}
{props.release_date}
)
}
函数App（）{
const[content，setContent]=useState（null）
useffect（异步（）=>{
const response=等待获取（url）
const data=wait response.json（）
const[…movies]=data.results
设置内容（电影）
}, [])
返回(
{content&&}
)
}
导出默认应用程序；

您的数据在

电影中

道具：

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

---

您的数据位于

电影

道具中：

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