如何将获取的数据作为道具传递给带有反应钩子的组件?

Question

我正在尝试使用来自 API 的数据创建一个组件，但我找不到将数据作为道具传递给我的"剧集"组件的方法。

这是代码：

应用.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;

Answer 1

您的数据位于movie道具中：

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

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

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