React 获取 api 数据到组件 [英] React fetch api data to component

问题描述

我正在尝试从电影数据库 api 制作一个应用程序.我遇到了一个小问题.我有两个组件.首先，我使用 fetch 并为 Card 组件使用 map() 函数，我想在其中显示来自 api 的数据.如何正确连接?

https://codesandbox.io/s/p3vxqqz53q

渲染列表的第一个组件:

import React, { Component } from 'react';从./Card"导入卡片；类 ListApp 扩展组件 {构造函数(道具){超级(道具)；this.state = {项目: []，isLoaded: 假,}};componentDidMount = () =>{fetch("https://api.themoviedb.org/3/movie/popular?api_key=xxxxxxxx&page=1").then(resp => resp.json()).then(resp => {this.setState({isLoaded: 真,项目:resp.results})console.log(this.state.items)})};使成为() {var {isLoaded, items} = this.state;返回 (<div>{items.map(() =>(<卡片/>))};

);}}导出默认 ListApp；

第二个组件卡:

从'react'导入React；const Card = (items) =>{返回 (<div className="电影容器"><img src="https://image.tmdb.org/t/p/w185/{items.poster_path}" alt="没有照片" 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">更多</a>

)}导出默认卡；

解决方案

您需要将 item 对象作为 prop 传递给 Card 组件，如

{items.map(item => )}

然后从 Card 组件中访问 item 像

const Card = (props) =>{const {item} = 道具；...}

I am trying to make an application from The movie data base 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. How to connect them correctly?

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

{items.map(item => <Card key={item.id} item={item} /> )}

and then access item from within the Card component like

const Card = (props) => {
  const {item} = props;
  ...

}

这篇关于React 获取 api 数据到组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！