Javascript 访问React中有条件渲染的画布元素以进行打印

我对反应相对较新，并且在尝试将第三方绘图库集成到我的应用程序中时遇到了困难，在本例中是

chartjs

。（注意：我在这里查看了类似的问题，但无法从中找到解决方案）

我需要创建一个以HTML画布元素的上下文为目标的plot实例。我正在使用React的ref-prop来尝试实现这种行为，但我认为React方法的异步性让我绊倒了。在

render（）

方法中，

ctx.current

似乎总是空的。我还尝试将

chart（）

调用放入

componentDidMount

中，但是this.ctx没有定义，可能是因为条件呈现尚未发生，所以ref不存在

任何帮助都将不胜感激

class Hello extends React.Component {
    constructor(props) {
        super(props);

        this.state = {data: [], labels: []}

        this.ctx = React.createRef();

        this.fakeAPICall();
    }

    // retrieve fascinating data...
    fakeAPICall = () => {
        setTimeout(() => {
            console.log('Data fetched');
            this.setState({
                data: [1,2,3],
                labels: ['A', 'B', 'C']
            })
        }, 1500);
    }

    chart = () => {
        console.log('creating chart')
        const myChart = new Chart(this.ctx, {
            type: 'bar',
            data: {
                labels: this.state.labels,
                datasets: [{
                    label: 'Series 1',
                    data: this.state.data
                }]
            }
        })
    }

    render() {
        if(this.ctx && this.ctx.current) this.chart();

        return (
            <div>
                <h1>Fascinating Chart</h1>
                {
                    this.state.data.length
                        ?
                        <canvas
                            ref={c => {
                                this.ctx = c.getContext('2d')}
                            }
                            style={{ width: 400, height: 200 }}
                        />
                        :
                        <p>Loading ...</p>
                }
            </div>
        );
    }
}

ReactDOM.render(
    <Hello name="World" />,
    document.getElementById('container')
);

类Hello扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={data:[]，labels:[]}
this.ctx=React.createRef（）；
这个。fakeAPICall（）；
}
//检索迷人的数据。。。
fakeAPICall=（）=>{
设置超时（（）=>{
log（'Data fetched'）；
这是我的国家({
数据：[1,2,3]，
标签：['A'，'B'，'C']
})
}, 1500);
}
图表=（）=>{
console.log（'创建图表'）
const myChart=新图表（this.ctx{
类型：'bar'，
数据：{
标签：this.state.labels，
数据集：[{
标签：“系列1”，
数据：this.state.data
}]
}
})
}
render（）{
如果（this.ctx&&this.ctx.current）this.chart（）；
返回(
迷人的图表
{
this.state.data.length
?
{
this.ctx=c.getContext（'2d'）}
}
样式={{宽度：400，高度：200}
/>
:
加载

}
);
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);

---

我当前的最佳尝试附在这里：

它不起作用，因为在您将ref分配给

画布之后，没有进一步的状态更新；这意味着不再需要重新渲染（调用render方法），所以您永远无法执行
this.chart（）
。不要调用render中的最后一个方法，而是将其添加到
fakeAPICall
中的
setState
回调中：

this.setState({
    data: [1,2,3],
    labels: ['A', 'B', 'C']
}, () => this.chart());

一旦
setState
完成并重新呈现组件，将执行回调。您可以阅读更多有关状态回调的信息。
非常感谢，解释得很好，并为我修复了它。