ReactJs中来自API响应的表呈现问题

Posted 2023-01-11

我是新来的响应者，在显示表格时遇到了一些问题。当我尝试使用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>的子级。

我在线查找了该错误以查找上述错误，并从结果字符串中删除了所有空格。

不确定我在做什么错。

答案

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>

另一答案

请删除一些空白。您可以尝试以下

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