render函数中的控制台日志显示数据。 console.log(this.props)
的componentDidMount()
是未定义的(呵呵)。那怎么可能?我不明白async
在React中如何工作。
class Graph extends React.Component {
constructor(props) {
super(props);
this.state = { startTime:this.props.startTime,
endTime:this.props.endTime,
nodes:this.props.data
}
//console.log('graph data:', this.props.data)
}
componentDidMount() {
// console.log('nodes:', this.props.data)
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({data: this.props.data}));
console.log('setState:', this.props.data)
}
componentWillUnmount() {
this.force.stop();
}
render() {
// console.log('graph datas:', this.props.data)
return (
<svg width={this.props.width} height={this.props.height}>
{console.log('map data:', this.props.data)}
{Object.keys(this.props.data).map((node, index) =>(
<circle r={node.r} cx={node.x} cy={node.y} fill="red" key={index}/>
))}
</svg>
);
}//render
}//Component
export default graphql(getObjectsQuery,
{ options: (ownProps) => {
console.log(ownProps.startTime);
return ({ second: { startTime: ownProps.startTime,
endTime: ownProps.endTime
} })
} } )(Graph);
最佳答案
安装组件时,将同时调用componentDidMount
挂钩。重新渲染时不会调用它。
如the reference所述:
挂载组件(插入树中)后立即调用componentDidMount()。需要DOM节点的初始化应在此处进行。如果需要从远程端点加载数据,这是实例化网络请求的好地方。
目前尚未定义this.props.data
。
在每次重新渲染时触发render
钩子。这个问题没有显示组件的使用方式,但是可以预期data
中的<Graph data={...}
值可以异步定义,而console.log(this.props.data)
中的render
可以反映出来。
关于javascript - ReactJS/Javascript:componentDidMount()和渲染,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52012185/