ReactJS/Javascript：映射函数和渲染

图形组件正在获取数据（在控制台中验证），但由于某些原因，该页面仍然为空。我不确定我是否理解map函数是如何工作的。这是最后一块我需要弄清楚渲染这个图形，但无论出于什么原因，我似乎无法在屏幕上获得任何图形。控制台中节点的状态为：

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

图形组件：

import React, {Component} from 'react';
import * as d3 from "d3";
import {graphql} from 'react-apollo';
import getObjectsQuery from './Queries';

class Graph extends React.Component {
  constructor(props) {
    super(props);

    this.state = {  startTime:this.props.startTime, 
                    endTime:this.props.endTime,
                    nodes:this.props.getObjectsQuery
                  }
    //console.log('graph data:', this.props.data)
  }

  componentDidMount() {
   console.log('nodes:', this.props.data)
    this.force = d3.forceSimulation(this.props.data)
      .force("charge",
        d3.forceManyBody()
          .strength(this.props.forceStrength)
      )
      .force("x", d3.forceX(this.props.width / 2))
      .force("y", d3.forceY(this.props.height / 2));

    this.force.on('tick', () => this.setState({nodes: this.props.data}));
    console.log('setState:', this.props.data);
  }

  componentWillUnmount() {
    this.force.stop();
  }

    render() {
   // console.log('graph datas:', this.props.data)
    return (

      <svg width={this.props.width} height={this.props.height}>

      {Object.keys(this.props.data).map((action, index) =>(
     <circle r={action.action} cx={action.second} cy={action.obj} fill="red" key={index}/>
      ))}
      </svg>
    );
  }//render
}//Component

export default graphql(getObjectsQuery, 
  { options: (ownProps) => { 
    console.log(ownProps.startTime); 
    return ({ second: { startTime: ownProps.startTime,
                            endTime: ownProps.endTime
     } }) 
  } } )(Graph);

  Graph.defaultProps = {
    width: 300,
    height: 300,
    forceStrength: -10
  };

import React，{Component}来自'React'；
从“d3”导入*作为d3；
从'react apollo'导入{graphql}；
从“./querys”导入getObjectsQuery；
类图扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={startTime:this.props.startTime，
endTime:this.props.endTime，
节点：this.props.getObjectsQuery
}
//console.log（'graph data:'，this.props.data）
}
componentDidMount（）{
console.log（'nodes:'，this.props.data）
this.force=d3.forceSimulation（this.props.data）
.force（“冲锋”，
d3.forceManyBody（）
.力量（本.道具.力量）
)
.力（“x”，d3.力x（本支柱宽度/2））
.力（“y”，d3.力（本支柱高度/2））；
this.force.on（'tick'，（）=>this.setState（{nodes:this.props.data}））；
console.log（'setState:'，this.props.data）；
}
组件将卸载（）{
这个。强制。停止（）；
}
render（）{
//console.log（'图形数据：'，this.props.data）
返回(
{Object.keys（this.props.data）.map（（action，index）=>(
))}
);
}//渲染
}//组成部分
导出默认图形QL（getObjectsQuery，
{选项：（ownProps）=>{
console.log（ownProps.startTime）；
return（{second:{startTime:ownProps.startTime，
endTime:ownProps.endTime
} }) 
}（图表）；
Graph.defaultProps={
宽度：300，
身高：300，
力量：-10
};

如果

此.props.data.action

是一个数组，则可直接在地图中使用：

{this.props.data.action.map((action,

但是

this.props.data.action

（甚至

this.props.data

？）可以在开始第一次渲染时取消定义

在渲染中使用一些条件以防止错误，例如

{!this.props.data.loading && this.props.data.action.map((action,

---

检查是否存在

加载
。。。传递到组件中的道具结构可以通过
graphql（）
中的config
props
属性中定义的fn进行不同的映射（例如，在道具名称冲突的情况下）搜索示例。
共享完整的json结构
{variables:{…}，refetch:ƒ，fetchMore:ƒ，updateQuery:ƒ，startPolling:ƒ，…}action:Array（1072）[0…99]--这里新行--0:{action:“Changed”，时间戳：149934805000，对象：数组（1），第二个：数组（1），u typename:“action”，…}
我的意思是this.props.data我刚刚在原始问题中添加了一张图片。