时间戳

首页 > 解决方案 > ReactJS/Javascript：映射函数和 JSON

javascript - ReactJS/Javascript：映射函数和 JSON

问题描述

在此处输入图像描述在控制台中，数据加载了我尝试渲染的 JSON 文件（见下文）。来自 Chrome 的错误消息是TypeError: data.map is not a function. 我没有找到 d3.extent 函数的好例子，所以我在这里寻求一些帮助。Graph 组件如下所示：

constructor({data=[]}) {
  console.log('construc data:', data)
    const times = d3.extent(data.map(action => action.timestamp))
    const range = [50, 450]
    super({data})
    this.state = {data, times, range}
}

JSON 文件：

{data: 
     action: 
        {action: [{action: "Changed", timestamp: 1499348050,…},…]}

标签： javascriptreactjsgraphql-jsmap-function

解决方案

不正确的 JSON

您的 JSON 文件无效，因为您的密钥需要用引号括起来。使用JSON 验证器确保您拥有正确的 JSON 文件。

调用.map()一个Object导致一个TypeError

当您的数据从 JSON 文件加载时（并且不默认为构造函数设置的空数组），请确保它的形状为 an ，因为在 an而不是 an上Array调用该.map()方法会导致 a 。这是因为它是的原型的一部分，需要 a作为参数。ObjectArrayTypeError.map()Arrayd3.extent(array)Array

阅读有关 JavaScript 的更多信息Array

阅读有关 JavaScript 的更多信息Object

正确的方法

如果您的 JSON 已正确加载到data对象中，则以下内容应该有效：

d3.extent(data.action.action.map(action => action.timestamp))

推荐阅读