[英]React fetch api data to component
I am trying to make an application from The movie data base api.我正在尝试从电影数据库 api 制作一个应用程序。 I came across a small problem.
我遇到了一个小问题。 I have two components.
我有两个组件。 In first I use fetch and I use the map() function for the Card component in which I would like to display data from the api.
首先,我使用 fetch 并为 Card 组件使用 map() 函数,我想在其中显示来自 api 的数据。 How to connect them correctly?
如何正确连接它们?
https://codesandbox.io/s/p3vxqqz53q https://codesandbox.io/s/p3vxqqz53q
First component for render list:渲染列表的第一个组件:
import React, { Component } from 'react';
import Card from "./Card";
class ListApp extends Component {
constructor(props){
super(props);
this.state = {
items: [],
isLoaded: false,
}
};
componentDidMount = () => {
fetch("https://api.themoviedb.org/3/movie/popular?api_key=xxxxxxxx&page=1")
.then(resp => resp.json())
.then(resp => {
this.setState({
isLoaded: true,
items: resp.results
})
console.log(this.state.items)
})};
render() {
var {isLoaded, items} = this.state;
return (
<div>
{items.map( () => ( <Card/> ) )};
</div>
);
}
}
export default ListApp;
Second component Card:第二个组件卡:
import React from 'react';
const Card = (items) => {
return (
<div className="movie-container">
<img src="https://image.tmdb.org/t/p/w185/{items.poster_path}" alt="NO PHOTO" className="movie-container__img" />
<div className="movie-container__about">
<span className="movie-container__percent">{items.vote_average}</span>
<h2 className="movie-container__title">{items.original_title}</h2>
<p className="movie-container__date">{items.release_date}</p>
<p className="movie-container__text">{items.overview}</p>
<a href="https://www.themoviedb.org/movie/" className="movie-container__more">MORE</a>
</div>
</div>
)
}
export default Card;
You need to pass the item
object as a prop to the Card component like您需要将
item
对象作为道具传递给 Card 组件,例如
{items.map(item => <Card key={item.id} item={item} /> )}
and then access item
from within the Card component like然后从 Card 组件中访问
item
,如
const Card = (props) => {
const {item} = props;
...
}
This code should work.这段代码应该可以工作。
The map in the ListApp as @Aakash suggested: @Aakash 建议的 ListApp 中的地图:
render() {
var { isLoaded, items } = this.state;
return (
<div>
{items.map(item => (<Card key={item.id} item={item} />))};
</div>
);
}
An Card correctly referencing the item prop:正确引用物品道具的卡片:
// Card.js
import React from 'react';
const Card = (props) => {
const { item } = props;
return (
<div className="movie-container">
<img src="https://image.tmdb.org/t/p/w185/{items.poster_path}" alt="NO PHOTO" className="movie-container__img" />
<div className="movie-container__about">
<span className="movie-container__percent">{item.vote_average}</span>
<h2 className="movie-container__title">{item.original_title}</h2>
<p className="movie-container__date">{item.release_date}</p>
<p className="movie-container__text">{item.overview}</p>
<a href="https://www.themoviedb.org/movie/" className="movie-container__more">MORE</a>
</div>
</div>
)
}
export default Card;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.