[英]ReactJS map function error
After I click the submit button a query goes to a Neo4j DB and the response is sent back. 单击提交按钮后,查询将转到Neo4j DB,并将响应发送回去。 Also, when the button is click another function is sending that data to the Graph function {this.state.submit && this.displayElements()}
. 同样,当单击按钮时,另一个函数会将数据发送到Graph函数{this.state.submit && this.displayElements()}
。 Once in the Graph function I trying to render a graph but React is saying map is undefined. 一旦在Graph函数中,我尝试渲染图,但是React表示map未定义。 However, a console log of props from inside Graph shows: {data:{action: "Changed", timestamp: 1499348050, object: Array(1), Second: Array(1), __typename: "action", …}
. 但是,在Graph内部的道具控制台日志显示: {data:{action: "Changed", timestamp: 1499348050, object: Array(1), Second: Array(1), __typename: "action", …}
。 I have tried different combination before map but nothing seems to work (this.props.nodes, this.state.action, etc). 我在地图之前尝试了不同的组合,但似乎没有任何效果(this.props.nodes,this.state.action等)。
Display Function (Sending data via props as nodes) 显示功能(通过道具作为节点发送数据)
displayElements = () => {
const {data:{loading, error, action}} = this.props;
console.log(this.props);
if(loading) {
return <option disabled>Loading...</option>;
}else if (error){
return<p>Error!</p>;
}
return (
<Graph nodes={this.data}/> <--Sending data to Graph via props as nodes
);
}
Graph Function 图形功能
class Graph extends React.Component {
constructor(props) {
super(props);
this.state = {nodes: this.props};
console.log(this.props + "graph")
}
componentDidMount() {
this.force = d3.forceSimulation(this.state.nodes)
.force("charge",
d3.forceManyBody()
.strength(this.props.forceStrength)
)
.force("x", d3.forceX(this.props.width / 2))
.force("y", d3.forceY(this.props.height / 2));
this.force.on('tick', () => this.setState({nodes: this.state.nodes}));
}
componentWillUnmount() {
this.force.stop();
}
render() {
return (
<svg width={this.props.width} height={this.props.height}>
{this.state.nodes.action.map((node, index) =>(
<circle r={node.r} cx={node.x} cy={node.y} fill="red" key={index}/>
))}
</svg>
);
}
}
export default Graph;
map is for an array, but your passing objects {data:{action: "Changed", timestamp: 1499348050, object: Array(1), Second: Array(1), __typename: "action", …}
map是一个数组,但是传递的对象{data:{action: "Changed", timestamp: 1499348050, object: Array(1), Second: Array(1), __typename: "action", …}
A solution can be Object.keys(this.state.nodes.action).map(()=>{...}
一个解决方案可以是Object.keys(this.state.nodes.action).map(()=>{...}
{Object.keys(this.state.nodes.action).map((node, index) =>(
<circle r={node.r} cx={node.x} cy={node.y} fill="red" key={index}/>
))}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.