获取rechart的悬停/工具提示数据

Question

我试图了解由recharts生成的数据对象的内部并用于填充其工具提示（因此我可以在其他地方显示它）。下图显示了

的输出

console.log(data.payload[0]);

通过放在工具提示内容上的函数获得：

<Tooltip content={ this.showTooltipData.bind(this) } />

但是，任何尝试获取对象组件（Object.keys（）返回预期的键）都会失败，并带有“undefined”或“null”引用（为 LiverpoolCoder 编辑）：

showTooltipData = (data) => {
  console.log(data.payload[0]);
  console.log(data.payload[0].color);
}

Uncaught (in promise) TypeError: Cannot read property 'color' of undefined
    at PlotCharts._this.showTooltipData (PlotCharts.js) (...)

我在这里错过了什么吗？

它看起来仍然像一个简单的数组。给出：

showTooltipData = (data) => {
  if ( typeof data.payload[0] !== 'undefined') {
    // console.log(data.payload[0].then(function(payload){ payload.color }));
    console.log(Object.keys(data.payload[0]));
    console.log("dataKey = " + data.payload[0]["datakey"]);
  }
}

我在日志中看到（你可以在上面的输出中看到dataKey确实包含一个值）：

编辑：上面的代码工作正常，“datakey”是一个错字 - 移动到dataKey，它似乎工作。对于通过网络搜索到达同一问题的其他任何人 - 您必须在访问之前检查（如上所述）数据的存在 - 移动鼠标会不断创建和销毁数据。

Answer 1

答案来自上面：

showTooltipData = (data) => {
  if ( typeof data.payload[0] !== 'undefined') {
    console.log(Object.keys(data.payload[0]));
    console.log("dataKey = " + data.payload[0]["dataKey"]);
  }
}

在访问数据之前，您必须检查（如上所述类型）数据的存在 - 移动鼠标会不断创建和销毁数据。