javascript - 我正在将一个 Prop 从 App.js 传递到 MovieCard.js，但传递的 Prop 显示为空

Question

完整的github链接-: https://github.com/dhruv354/movie-app.git

我的 App.js

在 App.js 中，我使用 Map 函数迭代数据文件，该文件是一个对象数组并传递 每个对象作为 Moviecard 的 Prop ，但它显示为空

import './App.css'
import React from 'react'
import Navbar from './Navbar'
import MovieCard from './MovieCard'
import data from './data'

function App() {
  return (
    <div className="App">
    <Navbar />
     <div className='main'>
      <div className='tabs'>
        <div className='tab'>Movies</div>
        <div className ='tab'>Favourites</div>
      </div>

      <div className='movie-list'>
        {data.map((movie) => {
          <MovieCard movie = {movie} />
          return ''
        })}
      </div>
     </div>

    </div>
  );
}

export default App;

我的 MovieCard.js

在 Moviecard 中，我正在接收电影对象作为 Prop ，我尝试了控制台日志记录，但它显示为空

import React from 'react';
    import './MovieCard.css';
    
    function MovieCard(props){
            console.log(props)
            const movie = props.movie
            return (
                // <div className='movie-card-container'>
                    <div className='movie-card'>
                        <div className='left'>
                            <img alt='movie-poster' src= {movie.Poster} />
                        </div>
                        <div className='right'>
                            <div className='title'>{movie.Title}</div>
                            <div className='plot'>{movie.Plot}</div>
                            <div className='footer'>
                                <div className='rating'>{movie.Imdb}</div>
                                <button className='favourite-btn'>Favourite</button>
                            </div>
                        </div>
                    </div>
                // </div>
            );
    }
    
    export default MovieCard; 

我的数据.js

这是一个对象数组，其中包含有关电影的信息，例如情节、标题、imdb 及其海报

const data = [
    {
        Plot: 'It is 1941 and the world is in the throes of war. Steve Rogers (Chris Evans) wants to do his part and join Americas armed forces, but the military rejects him because of his small stature',
        Poster: 'https://i.pinimg.com/564x/ae/90/e7/ae90e774ef756936e18dfb287b28dd64.jpg',
        Imdb: 6.9,
        Title: 'Captain America'
    },

    {
        Plot: 'A thief who steals corporate secrets through the use of dream-sharing technology is given the inverse task of planting an idea into the mind of a C.E.O.',
        Poster: 'https://flxt.tmsimg.com/assets/p7825626_p_v10_af.jpg',
        Imdb: 8.8,
        Title: 'Inception'
    }
]

export default data;

请帮忙

Answer 1

在你的 map 函数中你每次都返回一个空字符串:

{data.map((movie) => {
  <MovieCard movie = {movie} />
  return ''
})}

你应该返回 JSX 而不是:

{data.map((movie) => <MovieCard movie = {movie} /> )}