Reactjs 反应列表呈现不'；t work-应为赋值或函数调用，而应为表达式

所以我有一个应用程序组件，在其中我向API发送一个请求，然后将单个游戏作为对象返回。然后我将它们作为“游戏”数组放入状态，并在应用程序组件中呈现它们——它是这样工作的

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>
  );

您知道如何将其提取到新组件中并使其工作吗？

在此代码中：

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

props.games.map（游戏=>{
}

是一个不需要任何处理的表达式（因此会出现错误）

---

这是因为您使用

game=>{/*…*/}

而不是

game=>表达式

。当您使用

{}

时，您需要

返回

一些内容来为

映射

迭代提供任何结果。当您省略

{/code>时，您会自动“返回”给定的表达式。
您忘记了映射中的返回。
return
或者，如果它是一个只有一个表达式的箭头函数，就去掉{和}。谢谢大家。我完全忘记了映射方法中的返回。最后成功地使它工作：）
{loading ? <Loading /> : <Games games={games}/>}

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

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