Graphql/React-Apollo：反应地图功能错误答案

【问题标题】：Graphql/React-Apollo: React map function errorGraphql/React-Apollo：反应地图功能错误
【发布时间】：2018-11-13 19:00:13
【问题描述】：

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

{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

【问题讨论】：

在您的地图 console.log(data) 中，以确保您想要的数据确实存在。您提供的 JSON 的 sn-p 似乎缺少您想要在地图中访问的内容。
我想映射动作。
根据您提供的 JSON，{data.r} cx={data.x} cy={data.y} 数据没有您想要的属性。我建议您控制台data 以确保您确实拥有所需的密钥。
{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", …}
我强烈建议您只将您需要的部分数据返回给组件，而不是从您的查询返回的全部数据。这将帮助您正确定位您正在寻找的信息。 React 组件不需要其余的方法。

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

【解决方案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));

这将向您显示每个操作中的信息，以便您可以按照您期望的方式操作它。

【讨论】：

你指的是什么属性？
我的意思是，data.r、data.x、data.y 信息。这些必须是动作属性才能起作用，否则您没有向我们展示适当的信息来回答问题
如果您查看我在控制台中发布的原始问题。你能解释一下 r、x 和 y 是什么吗？
它在您的代码中。在标签中。你说 r={data.r}。
这是数据的样子：{data: {action: [{action: "Changed", timestamp: 1499348050,…},…]}}