Компонент ListView в React Desktop: проблема с отображением элементов списка из массива

Question

У меня есть электронное приложение, которое использует React для рендеринга пользовательского интерфейса, я пытаюсь использовать React-Desktop library для создания приложения, похожего на macOSX, в Electron.

В моем компоненте ListView есть состояние, которое представляет собой массив объектов json. Я пытаюсь перебрать массив и отобразить элементы списка, но есть проблема рендеринга. Подробности не будут отображаться на мой взгляд, когда состояние обновляется. Вывод журнала консоли работает просто отлично. Я подозреваю, что это как-то связано с представлением списка, если я пытаюсь визуализировать отдельные элементы, используя {this.renderItem(this.state.value[0].ID)} в моем jsx, это работает отлично. Однако моя цель состоит в том, чтобы заполнить эти элементы, используя цикл

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