Graphql / React-Apollo：React Map函數錯誤

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}/>
  );
}

假設這些屬性確實存在於每個動作中。

如果要使用“動作上方地圖”，請嘗試在渲染頂部運行此行

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

這將向您顯示每個動作中的信息，以便您可以按預期的方式對其進行操作。