时间戳

首页 > 解决方案 > validateDOMNesting(...)：文本节点不能作为子节点出现

javascript - validateDOMNesting(...)：文本节点不能作为子节点出现

问题描述

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

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

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

标签： javascriptreactjsmaterial-ui

解决方案

问题在于您处理从 api 获得的响应的方式。您正在返回一个对象而不是一个数组。

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

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

看index.js在fetchApi.

推荐阅读