如何将获取的数据作为道具传递给具有反应钩子的组件? [英] How to pass fetched data as props to a component with react hooks?

问题描述

我正在尝试使用来自 API 的数据创建一个组件，但我没有找到将数据作为道具传递给我的情节"组件的方法.

代码如下:

App.js

import React, { useState, useEffect } from 'react';const url = 'https://swapi.co/api/films/'功能集(道具){返回 (<div>{道具.title}{props.release_date}

)}功能应用(){const [content, setContent] = useState(null)useEffect(async() => {const 响应 = 等待获取(url)const 数据 = 等待 response.json()const [...电影] = data.results设置内容(电影)}, [])返回 (<div>{内容&&<剧集电影={content[0]}/>}

)}导出默认应用程序；

解决方案

您的数据在 movie 道具中:

所以在你的组件中你需要访问props.movi​​e:

function Episode(props){返回 (<div>{道具.电影.标题}{props.movi​​e.release_date}

)}

I'm trying to create a component with data from a API, but i don't find a way to pass the data as props to my 'Episode' component.

Here is the code:

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;

解决方案

your data is in a movie prop:

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

So in your component you need to access props.movie:

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

这篇关于如何将获取的数据作为道具传递给具有反应钩子的组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！