validateDOMNesting(...)：文本節點不能作為子節點出現

Question

我不知道為什么我會收到這個警告？ 因此我看不到更新的表格..

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

在某些情況下，我看到它是關於一些空格和不同的表格標簽，但我不明白這在這里如何應用。

桌康

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

state和傳遞道具的 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

Answer 1

問題在於您處理從 api 獲得的響應的方式。 您返回的是 object 而不是數組。

https://codesandbox.io/s/silly-dan-7iusu

這是一個工作沙箱，我只是從響應中獲取所有數據並將其傳遞下來。 您也可以自己創建一個數組，只使用您需要的數據。 但目前您正在傳遞 object。

查看fetchApi中的index.js 。