Graphql / React-Apollo：React Map函数错误

Question

In the console I am seeing the following data. It appears I am not using the map function correctly:

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

I am trying to graph the data using the following function but the screen is blank:

render() {
  console.log('graph nodes:', this.props.data)
  return (
    <svg width={this.props.width} height={this.props.height}>
      {Object.keys(this.props.data).map((data, index) => (
        <circle r={data.r} cx={data.x} cy={data.y} fill="red" key={index}/>
      ))}
    </svg>
  );
}//render

Answer 1

You need to map over action, and not the keys of data.

{
  this.props.data.action.map((data, index) => (
    <circle r={data.r} cx={data.x} cy={data.y} fill="red" key={index}/>
  );
}

This is assuming those properties do exist inside of each action.

If you are looking to use the map over action, try running this line in the top of your render

this.props.data.action.map(item => console.log("this is an action: ", item));

That will show you the information in each action, so that you can then manipulate it the way you are expecting to do so.