Повторяющиеся строки таблицы отображаются в React-rails

Question

Я нахожусь в процессе создания элемента реакции для позиции в таблице.Я использую React-rails для этого и сталкиваюсь со странным поведением.

У меня есть одна запись в моей базе данных, и мой компонент реагирования перечисляет повторяющиеся записи.Это то, что отображается в DOM.

<div class="table-responsive">
    <div data-react-class="questions/QuestionLineItem" data-react-props="{&quot;prompt&quot;:&quot;What year was the NFL founded?&quot;,&quot;uuid&quot;:&quot;f85c2f85-95d8-4037-963f-d1503b24123b&quot;}" data-hydrate="t">
<tr><td>f85c2f85-95d8-4037-963f-d1503b24123b</td><td>What year was the NFL founded?</td></tr>
    </div>
    <table class="table table-striped table-sm">
        <thead>
        <tr>
            <th>UUID</th>
            <th>Question</th>
        </tr>
        </thead>
        <tbody>
            <tr data-reactroot=""><td>f85c2f85-95d8-4037-963f-d1503b24123b</td><td>What year was the NFL founded?</td></tr>
        </tbody>
    </table>
</div>

Одна запись корректно отображается в таблице, а другая плавает в верхней части, не вложенной в таблицу.Компонент моего элемента довольно прост.

import React from "react";
import PropTypes from "prop-types";
class QuestionLineItem extends React.Component {
  render() {
    return (
      <tr>
        <td>{this.props.uuid}</td>
        <td>{this.props.prompt}</td>
      </tr>
    );
  }
}

QuestionLineItem.propTypes = {
  prompt: PropTypes.string
};

export default QuestionLineItem;

Представление - это просто простая таблица, которая перебирает все элементы в активной коллекции записей.

<div class="table-responsive">
    <table class="table table-striped table-sm">
        <thead>
        <tr>
            <th>UUID</th>
            <th>Question</th>
        </tr>
        </thead>
        <tbody>
        <% @questions.each do |q| %>
            <%= react_component('questions/QuestionLineItem', { prompt: q.prompt, uuid: q.uuid }, { prerender: true} ) %>
        <% end %>
        </tbody>
    </table>
</div>

Может кто-нибудь объяснить это поведение?

Контроллер вопросов содержит только действие индекса.

class QuestionsController < ApplicationsController 
    def index
        @questions = Question.all
    end
end

Answer 1

Вы пытались добавить <React.Fragment> к выводу вашего React Component?Это выглядело бы так:

class QuestionLineItem extends React.Component {
  render() {
    return (
      <React.Fragment>
        <tr>
          <td>{this.props.uuid}</td>
          <td>{this.props.prompt}</td>
        </tr>
      </React.Fragment>
    );
  }
}

Для справки, здесь вы можете прочитать о React. Фрагменты подробнее здесь