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

Question

我正在尝试使用来自 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;

Answer 1

您的数据在 movie 属性中：

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

所以在你的组件中你需要访问props.movie:

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