Сгенерированная таблица div не отображается

Question

Я делаю веб-приложение React и пытаюсь динамически генерировать таблицу на основе выбранных данных (пользователей за определенный период времени). Пользовательские данные успешно загружены. Я использую тот же подход на другой странице. Однако на этот раз он не рендерится.

Вот код:

displayUsers(tableOfUsers) {
  let table = tableOfUsers.map(user => {
    return (
      <div className="div-table-row-titles" key={user.name}>
        <div className="div-table-col">{user.name}</div>
        <div className="div-table-col">{user.surname}</div>
        <div className="div-table-col">{user.email}</div>
        <div className="div-table-col">{user.tel}</div>
        <div className="div-table-col">{user.addedBy}</div>
      </div>
    );
  });
  return table;
}

render() {
  const userData = null;
  if (this.state.volunteers !== []) {
    console.log("HELLO");
    let userData = this.state.volunteers.map(user => {
      return (
        <div className="div-table-row-titles">
          <div className="div-table-col">{user.name}</div>
          <div className="div-table-col">{user.surname}</div>
          <div className="div-table-col">{user.email}</div>
          <div className="div-table-col">{user.tel}</div>
          <div className="div-table-col">{user.addedBy}</div>
        </div>
      );
    }); // this.displayUsers(this.state.volunteers);
    console.log(userData);
    userData = userData[0];
  }

  return (
    <form id="form1">
      <div>
        <p>{this.props.startTime}</p>
      </div>
      <div className="div-table">
        <div className="div-table-row-titles">
          <div className="div-table-col" align="center">
            Name
          </div>
          <div className="div-table-col" align="center">
            Surname
          </div>
          <div className="div-table-col" align="center">
            Email
          </div>
          <div className="div-table-col" align="center">
            Tel. No.
          </div>
          <div className="div-table-col" align="center">
            Volunteer
          </div>
        </div>
        {userData}
      </div>
    </form>
  );
}

Пользовательские данные есть, они правильно упорядочены, userData не null (определяется как [{...},{...}]). Тем не менее, он не отображается. Есть идеи как мне это исправить?

Заранее спасибо!

------ РЕШЕНИЕ -------

Я нашел проблему. User.addedBy был объектом (addBy имеет другие свойства), поэтому React не смог его обработать. Решено!

Answer 1

Это проблема из-за того, что let ?? Поскольку let имеет область видимости блока и "let userData" находится внутри блока if, он не будет доступен за пределами {}. Не могли бы вы попробовать объявить userData вне области действия if или использовать var ??

Answer 2

Без доступа к проекту это немного сложно отладить. Я бы начал с упрощения проблемы.

1. Сначала, возможно, посмотрите, что вы пытаетесь выполнить, и расскажите, какие компоненты можно использовать повторно (ячейка, строка, столбец, столбцы и т. Д.)
2. Начните строить каждый раздел по одному, чтобы вы могли отлаживать каждую часть по одному шагу, например, если у вас есть 5 добровольцев, можете ли вы показать 5 строк?

Могу я спросить, почему вы используете div вместо таблицы?