这是我的子组件(SecondOrder)的代码。我正在尝试用d3js和reactjs画一个甜甜圈。 componentWillReceiveProps应该在获取新道具时重新渲染组件并设置其中提到的状态,对吧?但它在这里不能正常工作。它确实触发但状态仍为null或未定义,当我试图循环this.state.selectedNode.connections
时,我收到错误,因为它仍未定义。奇怪的是,if也不起作用if(this.state.selectedNode !== 'undefined')
!我添加了console.log行,当this.state.selectedNode未定义时,它只打印到控制台一次(意思是组件没有重新渲染)问题在哪里?
export default class SecondOrder extends Component {
constructor(props) {
super(props);
this.state = {
nodes: [],
selectedNode: null,
};
}
componentWillReceiveProps(newProps){
if (newProps.selectedNode !== this.props.selectedNode){
this.setState({selectedNode:newProps.selectedNode})
}
if (newProps.nodes.length !== this.props.nodes.length){
this.setState({nodes:newProps.nodes})
}
componentDidMount() {
var width = 1000;
var height = 500;
var fullAngle = 2 * Math.PI;
var svgContainer = select(".container")
.append("svg")
.attr("width", width)
.attr("height", height)
.style("border", "1px solid");
var secondOrderList = [];
if(this.state.selectedNode !== 'undefined'){
console.log("************* ")
this.state.selectedNode.connections.forEach(target => {
console.log("target", target)
});
}
}
render() {
return (
<div>
<div className="donut" ref={(donut) => { this.donut = donut; }} />
</div>
);
}
}
答案 0 :(得分:1)
componentDidMount
仅被调用一次。那时你的状态如下:
this.state = {
nodes: [],
selectedNode: null,
};
你得到的新道具和状态可能会更新,但是没有方法可以回应更新(至少在提供的代码段中没有)。
componentDidUpdate可以做到这一点