React中调用对象方法作为子元素报错及NaN问题求助

先拆解三个报错的根源 #

1. item.d_price is not a function：要么你在data.js里没把d_price正确定义为函数，要么产品对象被序列化过（比如用JSON.parse处理过）导致函数丢失（JSON不支持存储函数）。
2. Functions are not valid as a React child：直接把函数本身丢给React渲染了，React只能渲染值，不能渲染函数引用。
3. 计算式显示NaN：计算时用到的price或discount不是有效数字（比如是字符串、undefined），导致乘法运算返回NaN。

具体解决步骤 #

1. 修正data.js里产品对象的定义

如果是本地定义的产品数组，确保d_price是普通函数（别用箭头函数，箭头函数的this不会指向当前产品对象），同时保证price和discount是数值类型：

// data.js
export const products = [
  {
    id: 1,
    name: "短袖T恤",
    price: 199, // 必须是数字，别写字符串"199"
    discount: 0.8, // 折扣比例，比如8折
    d_price: function() {
      // 加类型校验，防止NaN
      const validPrice = typeof this.price === 'number' ? this.price : 0;
      const validDiscount = typeof this.discount === 'number' ? this.discount : 1;
      return validPrice * validDiscount;
    }
  },
  // 其他产品...
];

如果产品数据是从API获取的（JSON格式），绝对不能在对象上挂函数，直接在组件里写单独的计算函数即可。

2. 在sales.jsx里正确调用/计算折扣价

// sales.jsx
import { products } from './data.js';

function Sales() {
  // 备选：如果不想在产品对象上挂方法，用这个独立计算函数
  const calcDiscountPrice = (product) => {
    const price = Number(product.price) || 0;
    const discount = Number(product.discount) || 1;
    return price * discount;
  };

  return (
    <div className="product-list">
      {products.map(item => (
        <div key={item.id} className="product-card">
          <h4>{item.name}</h4>
          <p>原价：¥{item.price}</p>
          {/* 方案1：调用对象上的方法（仅适用于本地定义的产品数组） */}
          <p>折扣价：¥{item.d_price()}</p>
          {/* 方案2：用独立计算函数（通用，API数据也能用） */}
          {/* <p>折扣价：¥{calcDiscountPrice(item)}</p> */}
        </div>
      ))}
    </div>
  );
}

export default Sales;

3. 避坑提醒

• 别用箭头函数定义产品对象的方法：箭头函数的this绑定的是模块顶层，不是当前产品对象，会导致this.price取到undefined。
• 永远做类型校验：不管是本地数据还是API数据，都要确保price和discount是有效数字，用Number()转类型或加默认值。
• API数据别存函数：JSON不支持函数，从后端拿的数据里不可能有方法，必须用组件内的独立计算函数。

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