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>
  )
}

如何使用React钩子将获取的数据作为道具传递给组件？

1 个答案: