Javascript React-won'；在映射函数中不进行渲染

我正在尝试使用JS函数map（）渲染包含一些对象的数组。 但是，当我返回文本时，不会显示任何内容：

console.log(this.props.project.projects); // (2) [{…}, {…}]
  this.props.project.projects.map((item, index) => {
    console.log(item.projectDescription); //"Testproject"
    return (
        <div key={index}>
         {item.projectDescription}
        </div>
      )
  })

console.log（this.props.project.projects）；//(2) [{…}, {…}]
this.props.project.projects.map（（项目，索引）=>{
console.log（item.projectDescription）；/“Testproject”
返回(
{item.projectDescription}
)
})

我只是不明白，为什么没有显示文本，因为console.log（item.projectDescription）正好显示了我想要显示的内容

更新： 当我将其更改为以下内容时，它会起作用：

return this.props.project.projects.map((item, index) => (
        <div key={index} style={{ color: '#fff' }}>
         {item.projektBeschreibung}
        </div>
      ))

返回此.props.project.projects.map（（项，索引）=>(
{item.projektBeschreibung}
))

我已经考虑过使用foreach方法，但我认为它实际上应该使用map（）函数工作

在这里，您还可以看到我的组件的渲染方法

class ProjectRow extends Component {

  renderProjects() {
    console.log(this.props.project);
    if (this.props.project.loading) {
    return (
      <div style={{color: '#fff'}}>
        Loading
      </div>
    )
    } else {
      console.log(this.props.project.projects);
      this.props.project.projects.map((item, index) => {
        console.log(item);
        console.log(item.projektBeschreibung);
        console.log(index);
        return (
            <div key={index}>
             {item.projektBeschreibung}
            </div>
          )
      })
    }
  }

  render() {
    return (
      <div>
        {this.renderProjects()}
      </div>
    );
  }
}

class ProjectRow扩展组件{
renderProjects（）{
console.log（this.props.project）；
if（this.props.project.loading）{
返回(
加载
)
}否则{
log（this.props.project.projects）；
this.props.project.projects.map（（项目，索引）=>{
控制台日志（项目）；
控制台日志（项目projektBeschreibung）；
控制台日志（索引）；
返回(
{item.projektBeschreibung}
)
})
}
}
render（）{
返回(
{this.renderProjects（）}
);
}
}

为什么不使用下面这样的地图

render(){
  return(
    <div>
     {this.props.project.projects.map((item, index) => (
        <div key={index}>         
             {item.projectDescription}
        </div>
      ))}
  </div>
 )
}

render（）{
返回(
{this.props.project.projects.map（（项，索引）=>(
{item.projectDescription}
))}
)
}

当函数碰到else案例时，

renderProjects

函数不会返回任何内容。以下是一个使用示例：

renderProjects() {
  console.log(this.props.project);

  if (this.props.project.loading) {
    return (
      <div style={{color: '#fff'}}>
        Loading
      </div>
    )
  } else {
    console.log(this.props.project.projects);

    // added return statement here
    return this.props.project.projects.map((item, index) => {
      console.log(item);
      console.log(item.projektBeschreibung);
      console.log(index);
      return (
        <div key={index}>
          {item.projektBeschreibung}
        </div>
      )
    })
  }
}

renderProjects（）{
console.log（this.props.project）；
if（this.props.project.loading）{
返回(
加载
)
}否则{
log（this.props.project.projects）；
//在这里添加了返回语句
返回此.props.project.projects.map（（项目，索引）=>{
控制台日志（项目）；
控制台日志（项目projektBeschreibung）；
控制台日志（索引）；
返回(
{item.projektBeschreibung}
)
})
}
}

在第一个示例中，我认为您只需要用父元素包装子元素。类似于

{children}

的东西应该可以工作。您是否像在渲染函数中一样显示代码？您可能没有显示或返回正在运行MapMap的任何函数map函数返回一个新数组。它不会改变现有的。必须将变量设置为映射数组并渲染该变量。使用你的代码。

映射

调用是否应该包装在

{…}

中才能起作用？@charlietfl他说没有呈现任何内容，但这不仅仅是缩短语法，而是返回div中的项目描述文本非常感谢你的回答。实际上，当我使用你的第二个例子时，它是有效的。实际上，我不确定为什么我的方法不起作用，因为我认为我也在返回它。