React收入组件首次渲染空div问题及props更新渲染需求

你遇到的空div问题，核心是组件挂载时incomeData大概率是初始空对象，再加上useEffect会在incomeData变化（包括首次挂载）时执行，直接把空对象塞进了displayData数组；如果父组件还不小心两次传递空的incomeData，就会出现两个空条目。另外你的setTotalAmount写法存在闭包问题，会导致总额计算不准确。

下面是具体的修复方案：

1. 在状态更新前过滤无效数据 #

在useEffect里先判断传入的incomeData是否包含有效核心字段（比如id、amount、income），只有有效数据才触发状态更新：

useEffect(()=>{
  // 先校验数据有效性，过滤空对象或不完整数据
  if (!incomeData.id || !incomeData.amount || !incomeData.income) return;

  // 用函数式更新totalAmount，避免闭包导致的旧值复用问题
  setTotalAmount(prevTotal => prevTotal + incomeData.amount);
  // 仅添加有效数据到展示列表
  setDisplayData((prevData)=> [...prevData, incomeData]);
}, [incomeData])

2. 渲染时再做兜底过滤 #

就算上面的判断有遗漏，在渲染displayData时再过滤一遍无效条目，确保不会渲染空div：

{displayData
  .filter(data => data.id && data.amount && data.income)
  .map((data)=>{
    const {type, date, amount, income, id} = data
    return (
      <div key={id} className={style.incomeBox}>
        <div className={style.incomeDetail}>
           <p>{income}</p>
           <div>
             <span>{amount}</span>
             <span>{date}</span>
           </div>
        </div>
        <button id={id}>
          <AiFillDelete />
        </button>
      </div>
    )
  })}

3. 检查父组件的数据源传递逻辑 #

还要确认父组件是否在初始化时多次传递了空对象给incomeData（比如请求数据前先传一次空，又误传一次）。建议父组件初始时传递undefined，并在Income组件里设置props默认值：

// 父组件中
<Income incomeData={loadedIncomeData || undefined} />

// Income组件中
const Income = ({incomeData = {}}) => {
  // ... 组件逻辑
}

这样就能彻底避免空数据被添加到列表中，实现仅展示有效新旧数据的需求。

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