在控制台中,我看到以下数据。看来我没有正确使用地图功能:
{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
答案 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));
这将向您显示每个动作中的信息,以便您可以按预期的方式对其进行操作。