React Native创建X-Y坐标动态数组报错TypeError，求解决方案

你遇到的这个错误原因非常明确——你把data初始化成了null，但push()是数组的专属方法，null类型根本没有这个方法，所以调用data.push()的时候就会抛出这个类型错误。

先梳理下你的核心需求和出错的关键信息：

你的目标JSON数据（提取核心部分） #

"data": [
  { "x_value": 1, "y_value": 1527116400 },
  { "x_value": 43.45, "y_value": 1527030000 },
  { "x_value": 43.95, "y_value": 1526943600 },
  { "price": 44.1, "y_value": 1526425200 }, // 注意这里字段是price而非x_value
  // 其余数据项...
]

你出错的JS代码 #

var data = null; 
var array_data = response.sData.chart_data; 
for (let index = 0; index < chart_data.length; index++) { 
  data.push({ 
    array_data[index].x_value, 
    y: chart_data[index].y_value 
  }); 
}

除了data初始化的问题，你的代码还有两个隐藏小坑需要一并修正：

1. 变量名不一致：你把数据存在了array_data里，但循环里用的是chart_data，这会触发chart_data is not defined的新错误
2. JSON里有一项用price替代了x_value，直接取x_value会得到undefined，建议做字段兼容处理

修正后的完整代码 #

// 1. 把data初始化为空数组，而非null
var data = []; 
var array_data = response.sData.chart_data; 
// 2. 循环时使用正确的变量名array_data
for (let index = 0; index < array_data.length; index++) { 
  const currentItem = array_data[index];
  // 3. 兼容x_value和price字段，避免x值为undefined
  const xCoord = currentItem.x_value || currentItem.price;
  data.push({ 
    x: xCoord, 
    y: currentItem.y_value 
  }); 
}

额外优化建议 #

如果你的运行环境支持ES6+语法，可以用更简洁的map方法替代for循环，代码可读性更高：

const data = response.sData.chart_data.map(item => ({
  x: item.x_value || item.price,
  y: item.y_value
}));

这样处理后，不仅解决了data.push()的类型错误，还修复了变量名不一致和字段兼容的问题，就能正确生成你需要的X-Y坐标数组了。

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