Javascript validateDOMNesting（…）：文本节点不能显示为<；的子节点；t车身>；

我不知道为什么我会收到这个警告？由于这个原因，我看不到更新过的表

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

警告：validateDOMNesting（…）：文本节点不能显示为的子节点。

在某些情况下，我看到它是关于一些空白和不同的表标记，但我不知道这在这里是如何应用的

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>
    )
}

从'@material ui/core'导入{纸张、表格、表体、表格单元格、表格容器、表格头、表格行}
从“React”导入React
导出常量国家=（{details}）=>{
返回(
国家
总感染量
回收总量
总死亡人数
{details.length&&details.map（（细节）=>{
返回(
{detail.cases}：null
);
})}
)
}

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;

import React，{useffect，useState}来自“React”
从“./components/pageOne/Appbar”导入{Appbar}
从“./components/pageOne/Cards”导入{Cards}
从“./components/FetchDataFromApi”导入{fetchData，fetchCountries}
从“./components/pageOne/TableCom”导入{Countries}
函数App（）{
const[data，setData]=useState（{}）
const[details，setDetails]=useState（[]）
useffect（（）=>{
（异步（）=>{
const fetchAPI=await fetchCountries（）；
setDetails（fetchAPI）
})()
}, []);
useffect（（）=>{
（异步（）=>{
const fetchedData=等待fetchData（）；
设置数据（获取数据）
})()
}, [])
返回(
问题在于处理api响应的方式。返回的是对象而不是数组


这是一个工作沙盒，我只是从响应中获取所有数据并向下传递。你也可以自己创建一个数组，只使用你需要的数据。但目前你正在传递一个对象

查看
fetchApi
中的
index.js
，问题在于处理从api获得的响应的方式。返回的是对象而不是数组


这是一个工作沙盒，我只是从响应中获取所有数据并向下传递。你也可以自己创建一个数组，只使用你需要的数据。但目前你正在传递一个对象

看看
fetchApi
中的
index.js
，简单地看一下，看起来你想做一个三元，但你没有做一个三元。例如，{detail.cases}中有“：null”：nulli在收到此警告后添加了此null，但这不起作用，最初我没有使用html标记，而是使用material ui TableCell。您可以使用可复制的大小写制作一个codesandbox吗？按照您的方式，您应该实际看到文本“：null”在你的html中，因为它不是三元组。你不应该使用
TableCell
而不是
td
？因为你在头脑中使用TableCell，可能它与材质ui有关。我也使用过，在那之后，我认为它可能会工作，但它没有简单地看一下，看起来你正在尝试做ternary，但您没有进行三元运算。例如，{detail.cases}中有“：null”：nulli在收到此警告后添加了此null，但这不起作用，最初我没有使用html标记，而是使用material ui TableCell。您可以使用可复制的大小写制作一个codesandbox吗？按照您的方式，您应该实际看到文本“：null”在你的html中，因为它不是三元组。你不应该使用
TableCell
而不是
td
？因为你在头部使用TableCell，可能它与材质ui有关。我也使用过，在那之后，我认为它应该工作，但它做了很多工作，我检查过它现在工作正常，并且ying to better If in JavaScription你可以批准这个答案。是的，还有一个小问题，为什么一些国家的恢复病例统计数据没有显示在表中，这是表中的一个问题吗javascript@sultan
recovered
字段为空，因此数据存在问题。例如，对于英国。对于这些条目，您可以可以执行类似于
{detail.recovered？？？“数据丢失”}
好的，再次感谢您的帮助非常感谢，我已经检查过它现在运行得很好，并试图用JavaScript改进我自己。您可以批准这一点作为答案。是的，还有一个小问题，为什么一些国家的恢复病例统计数据没有显示在表中，这是其中的一个问题吗javascript@sultan 
recovered
字段为空，因此数据存在问题。例如，对于英国。对于这些条目，您可以执行类似于
{detail.recovered？？？“data missing”}
的操作。好的，再次感谢您的帮助