Question

我有一个电子应用程序，该应用程序使用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>
    );
  }

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

React Desktop的ListView组件：发布数组中的列表项

1 个答案: