React Desktop的ListView組件：發布數組中的列表項

Question

我有一個電子應用程序，它使用React進行UI渲染，正在嘗試使用React-Desktop庫在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 。
與.map一起嘗試，您將獲得一個新的商品數組。
不要忘記return關鍵字

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