ReactJS/Javascript：地图功能和渲染答案

【问题标题】：ReactJS/Javascript: map function and renderingReactJS/Javascript：地图功能和渲染
【发布时间】：2019-01-31 11:58:09
【问题描述】：

Graph 组件正在获取数据（在控制台中验证）但由于某种原因页面仍然是空白的。我不确定我是否了解地图功能的工作原理。这是我需要弄清楚以呈现此图形的最后一块，但无论出于何种原因，我似乎都无法在屏幕上看到任何图形。控制台中节点的状态为：

{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
  };

【问题讨论】：

分享完整的json结构
{variables: {…}, refetch: ƒ, fetchMore: ƒ, updateQuery: ƒ, startPolling: ƒ, …} action: Array(1072) [0 … 99]--new line here--- 0: {action: "Changed", timestamp: 1499348050000, object: Array(1), Second: Array(1), __typename: "action", …}
我的意思是 this.props.data
我刚刚在原始问题中添加了一张图片。

标签： java reactjs react-apollo graphql-js

【解决方案1】：

如果this.props.data.action是一个数组，那么可以直接在map中使用：

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

但this.props.data.action（甚至this.props.data?）可以在开始时未定义，第一次渲染

在渲染中使用一些条件来防止错误，f.e.

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

检查loading 是否存在...传递到组件的道具结构可以通过在graphql() 的配置props 属性中定义的fn 进行不同的映射（例如，在道具名称冲突的情况下）。 搜索示例。

【讨论】：