Javascript 我正在将一个道具从App.js传递到MovieCard.js，但传递的道具显示为空

完成github链接-：

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

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;

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; 

---

请帮助

在

映射

函数中，每次返回空字符串时：

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

---

是的，它起作用了，但是我的手机怎么了code@dhruvsinghal返回的不是组件u而是空字符串。如果这是有帮助的，考虑一下投票并选择它作为正确的答案。如果没有括号<代码> { <代码> >代码> } /代码>，DHRUVVSIGHAL将自动返回值。但是如果有括号，则需要包含

return

语句。您有括号，因此您需要返回元素

{data.map（（movie）=>{return}}

，或者直接去掉括号，以便自动返回

{data.map（（movie）=>）}

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

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