Проблема рендеринга таблицы из ответа API в ReactJs

Question

Я новичок, чтобы реагировать и сталкиваюсь с некоторыми проблемами с отображением таблицы. Когда я пытаюсь отобразить данные, используя State, отображается целое строковое значение вместо реальной таблицы.

Небольшой фрагмент данных, отображаемый в браузере:

Но когда я копирую и вставляю данные с экрана в метод render(), таблица отображается правильно. Текущий метод рендеринга -

render() {
  this.setValueForState();
  return (
    <div>
      <table>
        <thead>
          <tr>
            {this.state.Header}
          </tr>
        </thead>
        <tbody>
          {this.state.Detail}
        </tbody>
      </table>
    </div>
  );
}

Я получаю следующую ошибку в консоли. Я убедился, что в данных нет пустых пробелов.

index. js: 1 Предупреждение: validateDOMNesting (...): текстовые узлы не могут отображаться как дочерние элементы <tr> , Предупреждение: validateDOMNesting (...): текстовые узлы не могут отображаться как дочерние элементы <tbody>.

Я посмотрел эту ошибку в Интернете на предмет вышеуказанной ошибки и удалил все пробелы из строки результата.

Не уверен, что я делаю не так.

Answer 1

Пожалуйста, удалите некоторые пробелы . Вы можете попробовать с ниже

<tr key={id}>{this.state.Header}</tr>;

Answer 2

this.state.Header и this.state.Detail - строки, которые визуализируются как текстовые узлы. Как говорится в сообщении об ошибке, вы не можете помещать текстовые узлы внутри тегов <tr> или <tbody>, как вы это сделали. Для таблиц HTML необходимо, чтобы текстовые узлы были внутри тегов <td>. Ниже приведена действительная разметка таблицы.

<div>
  <table>
    <thead>
      <tr>
        <td>{this.state.Header}</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>{this.state.Detail}</td>
      </tr>
    </tbody>
  </table>
</div>