validateDOMNesting(...)：文本节点不能作为 <tbody> 的子节点出现

【问题标题】：validateDOMNesting(...): Text nodes cannot appear as a child of <tbody>validateDOMNesting(...)：文本节点不能作为 <tbody> 的子节点出现
【发布时间】：2020-12-12 20:05:31
【问题描述】：

我不知道为什么我会收到此警告？因此我看不到更新的表格..

Warning: validateDOMNesting(...): Text nodes cannot appear as a child of <tbody>.

在某些情况下，我看到它与一些空格和不同的表格标签有关，但我不明白这在这里如何应用。

TableCom

import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@material-ui/core'
import React from 'react'

export const Countries = ({details}) => {
    return (
        <TableContainer component={Paper}>
            <Table aria-label="simple table">
                <TableHead>
                    <TableRow>
                    <TableCell align='right'>Country</TableCell>
                        <TableCell align='right'>Total Infected</TableCell>
                        <TableCell align='right'>Total Recoverd</TableCell>
                        <TableCell align='right'>Total Deaths</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {details.length && details.map((detail) => {
                        return (
                      <TableRow>
                          <td key={detail.id}>{detail.cases}</td> : null
                      </TableRow>
                        );
                    })}
                </TableBody>
            </Table>
        </TableContainer>
    )
}

App.js 用于状态和传递道具

import React, { useEffect, useState } from 'react'
import { Appbar } from './components/pageOne/Appbar'
import { Cards } from './components/pageOne/Cards'
import { fetchData, fetchCountries } from './components/FetchDataFromApi'
import { Countries } from './components/pageOne/TableCom'

function App() {
  const [data, setData] = useState({})
  const [details, setDetails] = useState([])

    useEffect(() => {
      (async () => {
        const fetchAPI = await fetchCountries();
        setDetails(fetchAPI)
      })()
      }, []);

  useEffect(() => {

    (async () => {
      const fetchedData = await fetchData();
      setData(fetchedData)
      
    })()
  }, [])

  return (
    <>
    <Appbar />
    <Cards data = {data} />
    <Countries details = {details} />
    
    </>
  )
}

export default App;

解决这个问题的任何解决方案...codeSandBox

【问题讨论】：

• 简单地看一下，看起来你正在尝试做一个三元，但你不是在做一个三元。例如，您在 {detail.cases} 中有“：null”：null
• 我在收到此警告后添加了此 null 但这不起作用，最初我没有使用 html 标签 ，而是使用了 material-ui TableCell。
• 你能制作一个带有可重现案例的密码箱吗？你拥有它的方式，你应该在你的 html 中看到文本“：null”，因为它不是三元的。
• 您不应该使用TableCell 而不是td 吗？因为你在head中使用了tableCell，可能和material-ui有关。
• 我也用过，之后我认为它应该可以工作，但它没有