React Desktop 的 ListView 组件：问题从数组中渲染列表项答案

【问题标题】：ListView Component of React Desktop : Issue rendering List Items from an ArrayReact Desktop 的 ListView 组件：问题从数组中渲染列表项
【发布时间】：2018-08-29 00:30:39
【问题描述】：

我有一个使用 React 进行 UI 渲染的电子应用程序，我正在尝试使用 React-Desktop library 在 Electron 中构建一个类似 macOSX 的应用程序。

在我的 ListView 组件中有一个状态是 json 对象数组。我正在尝试遍历数组并渲染列表项，但是存在渲染问题。一旦状态更新，详细信息将不会显示在我的视图中。控制台日志输出工作得很好。我怀疑这与列表视图有关，如果我尝试在我的 jsx 中使用 {this.renderItem(this.state.value[0].ID)} 渲染单个项目，它会完美运行。但是我的目标是使用循环填充这些项目

  <ListView background="#f1f2f4" width="500" height="700">
    <ListViewHeader>
      <Text size="11" color="#696969">Order by name</Text>
    </ListViewHeader>
    <ListViewSection header={this.renderSectionHeader('Containers')}>
      {this.state.value.length == 0 ? "": this.state.value.forEach(element => {
          console.log(element.ID) //this works
          this.renderItem(element.ID, "some content") //nothing shows up


      })}
    </ListViewSection>
    <ListViewSeparator/>
    <ListViewSection header={this.renderSectionHeader('Images')}>
      {this.renderItem('Item 4', 'This is the fourth item.')}
      {this.renderItem('Item 5', 'This is the fifth item.')}
      {this.renderItem('Item 6', 'This is the sixth item.')}
    </ListViewSection>
    <ListViewFooter>
      <Text size="11" color="#696969">Status</Text>
    </ListViewFooter>
  </ListView>



  renderItem(title, info) {
    return (
      <ListViewRow
        onClick={() => this.setState({ selected: title })}
        background={this.state.selected === title ? '#d8dadc' : null}
      >



        <Text color="#414141" size="13">{info}</Text>
      </ListViewRow>
    );
  }

【问题讨论】：

标签： javascript reactjs electron rendering

【解决方案1】：

您正在使用forEach which is not returning anything。
试试.map，你会得到一系列新的物品。
别忘了return关键字

this.state.value.map(element => {
  console.log(element.ID) //this works
  return this.renderItem(element.ID, "some content")
})

【讨论】：