通过函数调用 Map() 不返回 JSX答案

【问题标题】：Map() not returning JSX when called through a function通过函数调用 Map() 不返回 JSX
【发布时间】：2020-04-13 15:49:40
【问题描述】：

我试图在遍历 map 函数时输出一堆 li。问题是代码直接放在渲染返回语句中时可以工作，但如果我将其组织在辅助函数中并在返回语句中调用该函数，则代码将停止工作。

作品：

const UserList = (props) => {
  if(props.items.length === 0){
    return (
      <div className="center">
        <h2>No users found.</h2>
      </div>
    );
  }
}

return <ul className="users-list">
  {
    props.items.map(user => {
      console.log(user.name);
      return <li>{user.id}</li>   
    })
  }
</ul>

不起作用：

const UserList = (props) => {
  if(props.items.length === 0){
    return (
      <div className="center">
        <h2>No users found.</h2>
      </div>
    );
  }
}

const renderList = () => {
  props.items.map(user => {
    console.log(user.name);
    return <li>{user.id}</li>   
  })
};

return <ul className="users-list">
  {renderList()}
</ul>

【问题讨论】：

renderList 没有返回语句。
谢谢，我的错，我以为只需要一个回报。
嗨，我不明白为什么这个问题被关闭了，我们有人正在努力掌握 JSX 以及组件如何工作，这将是一个将他们指向正确方向的机会
我会对功能组件的工作原理进行一些研究，因为理想情况下您想要做的是将 renderList 变成一个功能组件。或者也许你可以做的另一件事是反应中的共同点是将地图函数放在大括号内
@MaxCarroll 同意了。投票重新开放它

标签： javascript reactjs jsx

【解决方案1】：

你的方法需要有return语句。

const { items } = props; 

const renderList = () => {
  return items.map(user => {
      return <li>{user.id}</li>   
    }
  )
};

或者代码更少的简短版本。在箭头函数中，如果只返回结果而不进行进一步处理，则不需要写下花括号和 return 语句。

const { items } = props; 

const renderList = () => items.map(user => <li>{user.id}</li>);

【讨论】：

【解决方案2】：

这样做：

const renderList = () => {
    return props.items.map(user => {
        console.log(user.name);
        return <li>{user.id}</li>   
      }
    )
};

【讨论】：