Question

我正在尝试使用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-method，但我认为它实际上应该使用map（） - 函数。

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

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

Answer 1

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

Answer 2

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

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

React不会在map函数中呈现

2 个答案: