React组件使用table展示数据出现div嵌套报错、组件不渲染问题

你的代码存在4处核心问题，逐一修复即可正常运行：

• 空状态判断逻辑错误：传入Statistics组件的total是三个计数相加的数值类型，不存在length属性，total.length === 0的判断永远无法命中预期的无反馈状态。
• Props参数名不匹配：调用StatisticLine时传入的属性是statType和text，但组件内部解构接收的是type和value，导致组件拿不到渲染数据，所有单元格内容为空。
• HTML表格嵌套结构违规：<tbody>标签必须作为<table>的直接子元素，你当前将多个返回<tbody>的StatisticLine组件直接放在<div>下，触发DOM结构校验报错，浏览器会自动解析丢弃非法嵌套的节点。
• 平均值计算逻辑错误：运算符优先级问题导致仅bad值被除以3，整体计算结果不符合预期。

修复后完整代码 #

import { useState } from 'react'

const Feedback = ( {goodClick, neutralClick, badClick}) => {
    return(
        <div>
            <h1>Feedback</h1>
            <Button handler={goodClick} text={"good"}></Button>
            <Button handler={neutralClick} text={"neutral"}></Button>
            <Button handler={badClick} text={"bad"}></Button>
        </div>
    )
}

const Button = ({ handler, text }) => {
    return (
        <button onClick={() => handler(1)}>{text}</button>
    )
}
const Statistics = ({ goodValue, neutralValue, badValue, total, averageValue }) => {
    // 修正空值判断：数值类型直接判断是否为0
    if (total === 0){
        return(<div>Please give feedback using buttons above</div>)
    }
    return (
        // 外层使用table标签包裹，符合表格DOM规范
        <table>
            <tbody>
                <StatisticLine text="good" value={goodValue}></StatisticLine>
                <StatisticLine text="neutral" value={neutralValue}></StatisticLine>
                <StatisticLine text="bad" value={badValue}></StatisticLine>
                <StatisticLine text="total" value={total}></StatisticLine>
                <StatisticLine text="average" value={averageValue}></StatisticLine>
            </tbody>
        </table>
    )
}

const StatisticLine = ({ text, value }) => {
    // 修正：单行只返回tr，不需要单独套tbody
    return (
        <tr>
            <td>{text}</td>
            <td>{value}</td>
        </tr>
    )
}

const App = () => {
    const [good, setGood] = useState(0)
    const [neutral, setNeutral] = useState(0)
    const [bad, setBad] = useState(0)

    const incGood = (newValue) => setGood(good+newValue)
    const incNeutral = (newValue) => setNeutral(neutral+newValue)
    const incBad = (newValue) => setBad(bad+newValue)

    // 计算总反馈数
    const total = good + neutral + bad
    // 修正平均值计算：按常见满意度规则，good记1分、neutral记0分、bad记-1分，整体除以总反馈数，可按需调整评分规则
    const average = total === 0 ? 0 : (good - bad) / total

    return (
        <div>
            <Feedback
                goodClick={incGood}
                neutralClick={incNeutral}
                badClick={incBad}>
            </Feedback>

            <Statistics
                goodValue = {good}
                neutralValue = {neutral}
                badValue={bad}
                total = {total}
                averageValue ={average}
            >
            </Statistics>
        </div>
    )
}

export default App

内容的提问来源于stack exchange，提问作者DeeK