React Native中使用reduce方法对JSON数据的current_price字段求和的实现问题咨询

我来帮你梳理下代码里的问题，然后一步步修正~

首先，你的代码主要有3个关键错误：

• 你错误地试图对current_price这个单个字段调用reduce，但reduce是数组方法，应该对整个SAMPLE_DATA数组使用
• 你的reducer函数直接把currentValue（也就是数组里的整个加密货币对象）和前值相加，没有提取current_price属性，这会导致类型错误
• Text组件的写法有误，不仅不需要data属性，而且你把未完成的reduce调用直接写在了JSX里，语法也不完整

修正后的完整代码 #

首先假设你的SAMPLE_DATA结构是类似这样的（如果实际结构有差异，只需要调整属性名即可）：

// 示例数据结构
const SAMPLE_DATA = [
  { id: 1, name: 'Bitcoin', current_price: 45000 },
  { id: 2, name: 'Ethereum', current_price: 2300 },
  { id: 3, name: 'Solana', current_price: 120 }
];

然后是修正后的HomeScreen组件：

const HomeScreen = () => {
  // 计算所有current_price的总和
  const totalPrice = SAMPLE_DATA.reduce((prevTotal, cryptoItem) => {
    // 提取每个加密货币对象的current_price属性进行累加
    return prevTotal + cryptoItem.current_price;
  }, 0); // 初始值设为0，避免空数组时出现错误

  return (
    <Text>所有加密货币总价: ${totalPrice.toFixed(2)}</Text>
  );
};

关键细节解释 #

1. 正确使用reduce：我们对SAMPLE_DATA数组调用reduce，回调函数的第二个参数cryptoItem是数组里的每一个加密货币对象，所以要通过cryptoItem.current_price拿到我们需要的价格值
2. 设置初始值：reduce的第二个参数0是累加的初始值，这非常重要——如果数组为空，没有初始值会直接报错，有了初始值会返回0，保证代码鲁棒性
3. JSX中展示结果：先在组件内部计算好总和totalPrice，再把它放到Text组件里展示。我还加了toFixed(2)来格式化价格为两位小数，让显示更友好

你原来代码的问题拆解 #

• 你的reducer函数里previousValue + currentValue，这里的currentValue是整个加密货币对象，不是数字，所以会导致NaN或者类型错误
• current_price.reduce(reducer)完全不成立，因为current_price是单个数字，不是数组，没有reduce方法
• Text组件没有data这个属性，属于无效属性，完全不需要添加

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