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

时间:2018-08-24 18:10:20

标签: javascript reactjs graphql react-apollo map-function

在控制台中,我看到以下数据。看来我没有正确使用地图功能:

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

我正在尝试使用以下功能来绘制数据图形,但屏幕空白:

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

1 个答案:

答案 0 :(得分:0)

您需要映射操作,而不是数据键。

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

这是假设这些属性确实存在于每个动作中。

如果您希望使用map over action,请尝试在渲染器顶部运行此行

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

这将向您显示每个动作中的信息,以便您可以按预期的方式对其进行操作。