Question

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

{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

Answer 1

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

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

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

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

1 个答案: