在反应中使用地图和列表呈现 API 文件的问题答案

【问题标题】：Problem in rendering API file using map and list in react在反应中使用地图和列表呈现 API 文件的问题
【发布时间】：2021-11-04 19:49:12
【问题描述】：

当我尝试使用 map 时，我无法在反应中渲染电影 API（数据文件）。我已经在 MovieCard 组件中传递了数据。

没有报错。

我什至检查了 console.log(i)，它完美地打印了控制台中的所有电影数据，但没有渲染它。请帮忙。

控制台警告： 第 18:13 行：Array.prototype.map() 需要箭头函数 array-callback-return 的返回值

//Line 18:13
<div className="list">    
 {data.map(i=>{

<MovieCard movie={i}/>


 })}

//Also replaced data.map with data.forEach but still no progress.

//应用组件

import React from "react";
import{data} from '../data'
import Navbar from './Navbar'
import MovieCard from './MovieCard'

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="list">    
 {data.map(i=>{
  
<MovieCard movie={i}/>


 })}

</div>

</div>
</div>

);
}

export default App;


//MoviCard Component
import React, { Component } from 'react'


export class MovieCard extends Component 
{
    render() {

        const {movie} = this.props;
        return (
            <div className="movie-card">
            <div className="left">

                <img alt="movie-poster" src={movie.Poster}/>
            </div>
    
          <div className="right">
           <div className = "title"> {movie.Title} ({movie.Year})</div>
           <div className = "plot">{movie.Plot}</div>
           <div className = "footer">
           <div className = "rating">{movie.imdbRating}</div>
           <button className="favorite-btn">Favourite</button>
          </div>
            </div>

            </div>
        )
    }
}

export default MovieCard;

【问题讨论】：

标签： reactjs

【解决方案1】：

问题正是您所报告的：

Array.prototype.map() 需要箭头函数的返回值

您传递给.map 的函数没有返回任何内容：

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

你可以显式返回：

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

或者通过不将函数块包裹在花括号中来简化，而是只使用括号并依赖于单行箭头函数的隐式返回：

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

顺便说一句，在 React 中，您还希望像这样的渲染列表具有 key 属性。如果i 有一个唯一的 ID，那么您可以使用它。例如：

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

否则你可以依赖传递给.map回调函数的第二个参数，它只是一个索引：

data.map((i,x)=>(
  <MovieCard key={x} movie={i}/>
))

【讨论】：

【解决方案2】：

警告为您提供所需的所有信息：

控制台警告：第 18:13 行：Array.prototype.map() 需要箭头函数 array-callback-return 的返回值

你的箭头函数没有返回值

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

要么删除 {}：

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

或者你添加一个return语句：

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

您还需要添加一个密钥：<MovieCard key={i.some_unique_identifier} movie={i}/>

【讨论】：

【解决方案3】：

当你在做地图时，你需要从里面返回它。

在这里更正：

//Line 18:13
<div className="list">    
 {data.map(i=>{
    return <MovieCard movie={i}/>
 })}

//Also replaced data.map with data.forEach but still no progress.

【讨论】：

【解决方案4】：

试试这个。

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

data.map 函数将一个数组（在您的情况下为数据）转换为一个新数组。转换（映射）由 data.map 的参数定义，也称为回调函数。 data.map 的回调函数必须返回一个值。通过为数组的每一项返回一个值，data.map 是如何定义映射的。

【讨论】：