React validateDOMNesting警告：<tbody>不可包含空白文本节点

警告信息 #

react-dom.development.js:86 Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of . Make sure you don't have any extra whitespace between tags on each line of your source code.

错误调用栈 #

at tbody
at table
at div
at DisplayFlights (http://localhost:3000/static/js/bundle.js:228:66)
at RenderedRoute (http://localhost:3000/static/js/bundle.js:38680:5)
at Routes (http://localhost:3000/static/js/bundle.js:39102:5)
at div
at App
at Router (http://localhost:3000/static/js/bundle.js:39040:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:37398:5)

相关代码 #

import axios from 'axios';
import { useEffect, useState } from 'react';
import {Link, useParams} from 'react-router-dom'

function DisplayFlights() {
  const {from,to,departureDate} = useParams()
  const [flightData,setFlightData] = useState([])
  const [isLoading,setLoading]=useState(true)

  useEffect(()=>{
    axios.get('http://localhost:8081/flightnews/flights?from='+from+'&to='+to
    +'&departureDate='+departureDate).then(res=>{
      setFlightData(res.data);
      setLoading(false);
    })
  },[from,to,departureDate])
  return (
    <div>
      <h2>Flights:</h2>
      <table>
        <thead>
            <tr>
            <th>Airlines</th>
            <th>Departure City</th>
            <th>Arrival City</th>
            <th>Departure Date and Time</th>
            </tr>
        </thead>
          <tbody>{!isLoading?flightData.map(flight=><RowCreator item={flight}/>):""}</tbody>
      </table>
    </div>
  );
}

function RowCreator(props){
  var flight = props.item;

  return <tr><td>{flight.companyName}</td>
    <td>{flight.departureCity}</td>
    <td>{flight.arrivalCity}</td>
    <td>{flight.estimatedDepartureTime}</td>
    <td><Link to={'/passengerDetails/'+flight.id}>Select</Link></td></tr>
}
export default DisplayFlights;

问题排查与解决 #

核心原因 #

<tbody> 只允许 <tr> 元素作为直接子节点，你在加载状态时返回的空字符串 "" 会被 React 解析为空白文本节点，违反了 DOM 嵌套规则，从而触发警告。

解决方案 #

方案1：加载状态返回 null

将 <tbody> 内的条件渲染改为返回 null，null 不会生成任何 DOM 节点，完全符合规则：

<tbody>{!isLoading ? flightData.map(flight => <RowCreator key={flight.id} item={flight} />) : null}</tbody>

注：给 map 生成的元素加上 key 属性（用唯一的 flight.id），可避免 React 额外的 key 警告

方案2：加载状态渲染提示行

如果需要给用户加载反馈，可渲染一个跨列的提示行，同样符合 <tbody> 的子节点要求：

<tbody>
  {!isLoading ? 
    flightData.map(flight => <RowCreator key={flight.id} item={flight} />) : 
    <tr><td colSpan="5">加载中...</td></tr>
  }
</tbody>

额外检查 #

若修改后仍有警告，检查 <tbody> 标签内是否存在多余换行或空格——标签间的空白也可能被解析为文本节点，可将条件渲染代码与 <tbody> 标签紧凑书写：

tbody>{/* 此处避免多余空格 */}
  {!isLoading ? flightData.map(flight => <RowCreator key={flight.id} item={flight} />) : null}
</tbody>

内容的提问来源于stack exchange，提问作者Candide Mboungou-Kimpolo