React 列表渲染不起作用 - 期望分配或函数调用，而是看到一个表达式答案

【问题标题】：React list rendering doesn't work - expected an assignment or function call and instead saw an expressionReact 列表渲染不起作用 - 期望分配或函数调用，而是看到一个表达式
【发布时间】：2020-01-13 07:00:23
【问题描述】：

所以我有一个应用程序组件，我在其中向 API 发送请求，然后我将单个游戏作为对象返回。然后我将它们设置为“游戏”数组并将它们呈现在 App 组件中 - 它以这种方式工作。

const searchResult = games.map(game => {
    return <GameItem game={game} key={game.id}></GameItem>;
  });

  return (
      <div className='container'>
        <div className='header'>
          <Logo />
          <Navbar />
          <Search
            click={onClickHandler}
            search={searchInput}
            searchInput={handleSearchInput}
          />
        </div>

        {loading ? <Loading /> : searchResult}

      </div>
  );

当我试图将此 searchResult 提取到一个名为 Games 的新组件中时，问题就出现了。

import React from 'react';
import GameItem from './GameItem';

const Games = props => {
    return (
        <div>
            {props.games.map(game => {
                <GameItem game={game} key={game.id}/>
            })}
        </div>
    )
}

export default Games;

然后在 App.js 更改这一行

{loading ? <Loading /> : <Games games={games}/>}

我尝试了几种在 Games 组件中返回此表达式的方法，但它总是向我抛出该错误。

Line 8:  Expected an assignment or function call and instead saw an expression  no-unused-expressions

您有什么想法可以将其提取到新组件中并使其工作吗？

【问题讨论】：

您忘记了地图中的回报。 return <GameItem game={game} key={game.id}/>
或者如果它是一个只有一个表达式的箭头函数，就去掉 { 和 }
谢谢你们。我完全忘记了返回 map 方法。终于设法让它工作:)

标签： reactjs function variable-assignment

【解决方案1】：

在这段代码中：

props.games.map(game => {
                <GameItem game={game} key={game.id}/>
            }

<GameItem game={game} key={game.id}/> 是一个表达式，你什么都不做（因此出现错误）。

这是因为您使用game => {/*...*/} 而不是game => expression。当您拥有{} 时，您需要return 为map 迭代提供任何结果。当您省略 {} 时，您会自动“返回”给定的表达式。

【讨论】：