React 不会在地图函数中呈现

Posted 2023-02-22

【中文标题】React 不会在地图函数中呈现

【英文标题】：React won't render within map function

【发布时间】：2018-06-09 08:31:45

【问题描述】：

我正在尝试使用 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(item.projectDescription) 显示的正是我想要显示的内容。

更新： 当我将其更改为以下内容时它可以工作：

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

我已经考虑过使用 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>
    );
  

【问题讨论】：

在你的第一个例子中，我认为你只需要用父元素包装子元素。像<div>children</div> 这样的东西应该可以工作。

您显示的代码是否与渲染函数中的完全一样？您可能没有显示或返回正在运行地图的任何功能

map 函数返回一个新数组。它不会改变现有的。您必须为映射数组设置一个变量并渲染该变量。

It works fine for me 使用您的代码。

【参考方案1】：

renderProjects 函数在遇到 else 情况时不会返回任何内容。下面是一个使用示例：

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

【讨论】：

非常感谢您的回答。实际上，当我使用您的第二个示例时它可以工作。实际上，我不确定为什么我的方法不起作用，因为我认为我也会退回它。

【参考方案2】：

为什么不使用下面的地图？

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

【讨论】：

是否应该将 map 调用包含在 ... 中才能正常工作？

@charlietfl 他说什么都没渲染，但这里不仅仅是缩短语法，而是在 div 中返回项目描述文本