如何在componentDidUpdate中更新React元素?

时间:2019-07-02 21:19:01

标签: javascript reactjs

我正在尝试渲染几个反应元素,这些元素依赖于其他反应元素的x和y坐标。我知道我必须更新'componentDidUpdate'方法中的元素,因为在呈现组件之前我无法获取值。

当前行为没有任何更新。 renderNew包含我要渲染的react元素,但是它没有更新,因为什么也没有显示。

我不是在状态中存储值,我认为我不需要这样做。

在这里设置状态和其他变量

    constructor(props) {
        super(props);
        this.state = {
            priceDataData: jsonOrders.order.map(order => order.total),
            heightData: '',
            xElements: '',
            yElements: '',
            dotsWeWant: ''
        };
        this.dimensionsX = [];
        this.dimensionsY = [];
        this.renderNew = [];
        this.dotRef = [];
    }

这是我的componentDidUpdate方法

    componentDidUpdate = () => {

        const nodeRefs = this.dotRef;
        this.dimensionsX = this.connectTheDotsX(nodeRefs);
        this.dimensionsY = this.connectTheDotsY(nodeRefs);
        this.renderNew = this.renderNewLines(this.dimensionsX, 
        this.dimensionsY, this.state.priceDataData, this.state.dotsWeWant);

    }

    }

我的JSX的代码段,其中包含未更新的变量。第一次渲染时它将为空,需要更新。

    <div className="graph_space">
       <div className="dot_container">
           {this.state.dotsWeWant}
       </div>
       <div className="test_stuff">
            {this.renderNew}
       </div>
    </div>

0 个答案:

没有答案