reactjs - 屏幕上仅显示 1 张卡片或 4 张卡片连续反应和 antd。帮助我是新手

Question

我正在使用 antd 和一点引导程序。请找出故障。我正在从这个视频制作这个项目 - https://www.youtube.com/watch?v=VihRQ_uhHtE&t=1915s。此电影页面的所有文件如下所示。

这是主页面landingcomponent.js

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import {API_URL, API_KEY, IMAGE_URL} from '../../config/keys';
import {Typography, Row} from 'antd';
import MainImage from './MainImage';
import GridCard from './GridCard';

const {Title} = Typography;

function LandingPage() {
const [Movies, setMovies] = useState([])

useEffect( () => {

    fetch(`${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`)
    .then(response => response.json())
    .then(response => {
        console.log(response);
        setMovies(response.results);
    })
}, [])

return(
    <div style={{width:'100%'}}>
    {Movies[0] &&
    <MainImage image={`${IMAGE_URL}original${Movies[0].backdrop_path}`}
     title={Movies[0].original_title}
     text={Movies[0].overview} />}

    <div className= "m-2">
        <Title className='font-weight-bolder' style={{ color: 'black' }}>Latest Movies</Title>
        <div>
            <Row gutter={[16,16]}>
                {Movies && Movies.map((movie, index) => (
                    <React.Fragment key={index}>
                        <GridCard 
                                image={movie.poster_path && `${IMAGE_URL}original${movie.poster_path}`}
                                movieId={movie.id}
                        />
                    </React.Fragment>
                ))}
            </Row>
            <div className="text-center">
                <button className="btn btn-primary" onClick>Load More</button>
            </div>
        </div>
    </div>
    </div>
);

}

export default LandingPage;

这是我的 gridcard.js 文件

import React from 'react';
import {Col} from 'antd'

function GridCard(props) {
return (
    <Col lg={6} md={8} xs={24}>
        <div className="position-relative">
            <a href={`/movie/${props.movieId}`}>
                <img style={{ width:'100%', height:'300px'}} alt="image" src={props.image} />
            </a>
        </div>
    </Col>
)
}

export default GridCard;

也是最后一个 MainImage.js 文件

import React from 'react';
import {Typography, Row} from 'antd';

const {Title} = Typography;

function MainImage(props) {
return(
    <div className="img-responsive position-relative"
        style={{
            background: `url('${props.image}'), #1c1e1c`,
            backgroundPosition: 'center',
            backgroundSize: 'cover',
            height: '50vh',
            backgroundRepeat: 'no-repeat',
            width: '100%',
        }}
    >
        <div>
            <div className='position-absolute' style={{ maxWidth:'450px', bottom: '2rem', marginLeft: '2rem' }} >
                <Title className='h1' level={2}> {props.title} </Title>
                <p style={{ color: 'white', fontSize: '1rem' }}  > {props.text} </p>
            </div>
        </div>
    </div>
);
}

export default MainImage;

标签： reactjsapigridantd