Question

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

Answer 1

在初始渲染时，

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

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

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

componentDidUpdate可以做到这一点

componentWillReceiveProps不会重新呈现组件

1 个答案: