componentWillReceiveProps 不会重新渲染组件

Question

这是我的子组件（SecondOrder）的代码。我正在尝试使用 d3js 和 reactjs 绘制一个甜甜圈。 componentWillReceiveProps 应该在获取新道具时重新渲染组件并设置其中提到的状态，对吗？但它在这里不能正常工作。它确实触发了，但状态仍然为空或未定义，当我尝试循环 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>
            );
        }
    }

Answer 1

componentDidMount 在初始渲染时只被调用一次。那时你的状态如下：

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

你得到新的 props 和 state，可能会更新，但没有方法响应更新（至少它不存在于提供的代码 sn-p 中）。

componentDidUpdate 可以解决问题