componentWillReceiveProps不会重新呈现组件

时间:2018-03-04 19:13:15

标签: reactjs d3.js

这是我的子组件(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>
            );
        }
    }

1 个答案:

答案 0 :(得分:1)

在初始渲染时,

componentDidMount仅被调用一次。那时你的状态如下:

this.state = {
    nodes: [],
    selectedNode: null,
};

你得到的新道具和状态可能会更新,但是没有方法可以回应更新(至少在提供的代码段中没有)。

componentDidUpdate可以做到这一点