React中如何返回单个子元素？TypeScript代码问题排查

你的代码存在三个核心问题，导致无法正确渲染总空位数量：

• JSX中未执行定义的函数：你在<td>里写了一个箭头函数，但只是定义了它却没有调用，JSX不会自动执行这个函数，所以不会输出任何结果。应该改成立即执行函数{(()=>{...})()}，或者直接把逻辑写成表达式而非函数形式。

• 数组元素直接索引求和会导致NaN：你直接通过vacancyNum[0]+vacancyNum[1]+vacancyNum[2]+vacancyNum[3]求和，如果某个车辆类型的space不存在，对应的数组位置是undefined，和数字相加会得到NaN，最终结果无效。正确的做法是用数组的reduce方法安全求和。

• 返回值类型错误：你最后返回的是{totalVacancyNum}，这是一个对象，JSX无法直接渲染对象，会抛出错误，应该直接返回数值totalVacancyNum。

修正后的代码示例： #

<td className="tree-total-vacancy">
    {(() => {
        let vacancyNum: number[] = [];

        value.LGV?.space !== undefined && vacancyNum.push(value.LGV.space);
        value.HGV?.space !== undefined && vacancyNum.push(value.HGV.space);
        value.coach?.space !== undefined && vacancyNum.push(value.coach.space);
        value.motorCycle?.space !== undefined && vacancyNum.push(value.motorCycle.space);

        const totalVacancyNum = vacancyNum.reduce((sum, num) => sum + num, 0);
        return totalVacancyNum;
    })()}
</td>

或者更简洁的写法，不用数组直接累加：

<td className="tree-total-vacancy">
    {
        (value.LGV?.space ?? 0) +
        (value.HGV?.space ?? 0) +
        (value.coach?.space ?? 0) +
        (value.motorCycle?.space ?? 0)
    }
</td>

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