React商品列表总价计算显示NaN问题求助

核心问题分析 #

总价显示NaN的直接原因是商品数组中存在price属性为undefined的元素，当执行parseFloat(undefined)时会得到NaN，累加后整个总价就会变成NaN。

具体错误点 #

1. addItem函数与调用逻辑不匹配
   在App.js的addItem方法中，添加的新对象仅包含id，完全缺失product和price属性：

addItem = (item) => {
  this.setState({items: [...this.state.items, {id: this.state.items.length > 0 ? (this.state.items[this.state.items.length - 1].id + 1): 1}]}
)}

同时在Items组件中，点击+按钮时传递的是item.id而非完整商品对象：

<p onClick={()=>add(item.id)}>+</p>

这导致addItem接收到的参数是数字id，最终添加到数组中的对象没有price属性，计算总价时自然会出现NaN。

2. 直接修改原state数组（次要风险）
   deleteItem中的items.splice、addItem2中的items.push都是直接修改state原数组，不符合React的state不可变原则，可能引发后续渲染异常。

修复方案 #

1. 修复+按钮的商品复制逻辑 #

先修改Items组件的按钮调用，传递完整商品对象：

// Items.js中修改+按钮点击事件
<p onClick={()=>add(item)}>+</p>

再修改App.js的addItem函数，复制传入的商品并生成新id：

addItem = (item) => {
  const newItem = {
    ...item,
    id: this.state.items.length > 0 ? this.state.items[this.state.items.length - 1].id + 1 : 1
  }
  this.setState(prevState => ({
    items: [...prevState.items, newItem]
  }))
}

2. 给总价计算添加容错处理 #

为避免后续其他异常情况，在Total组件中增加有效数字判断：

// Total.js修改计算逻辑
const Total = (props) => {
    const {items} = props;
    let total = 0
    for (let i = 0; i < items.length; i++) {
        const price = parseFloat(items[i].price)
        // 仅累加有效数字，无效值按0处理
        total += isNaN(price) ? 0 : price
    }
    return (
        <div>
            <p className="text">Total Price: {total}</p>
        </div>
    )
}

3. 遵循state不可变原则修改其他方法 #

// 修复deleteItem
deleteItem = (id) => {
  this.setState(prevState => ({
    items: prevState.items.filter(item => item.id !== id)
  }))
}

// 修复addItem2
addItem2 = (item) => {
  const newItem = {
    ...item,
    id: this.state.items.length > 0 ? this.state.items[this.state.items.length - 1].id + 1 : 1
  }
  this.setState(prevState => ({
    items: [...prevState.items, newItem]
  }))
}

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