版上的前辈们大大好
想请教一个关于在React中接收远端资料使用D3画图的问题
目标：
制作一个页面，利用axios从远端API接收资料
再透过D3绘制出长条图显示
程式：
首先我先写了一个组件 BarChart.js
并在生命周期函数componentDidMount()中
利用axios.get()透过API接收远端资料
取得资料后进到drawChart()中进行D3图像绘制
BarChart.js https://imgur.com/pbLBQog
这部分可以顺利执行 https://imgur.com/V1Q29cT
接着我想要将接收资料与图面绘制进行拆分
父组件App.js接收资料，再透过props传递给子组件BarChart.js
目前是想在父元素利用asiox接收远端资料
再透过props传送给子元素进行D3图像绘制
流程：
1. 父元素接收资料
2. 利用setStaet()传送给state
3. 在子组件中的props接收新的state值（远端资料）
4. 传送给子组件
5. 在子组件中进行绘图
App.js https://imgur.com/bRlWAKt
BarChart.js https://imgur.com/hbHglZ5
不过这边出了一点问题
就是我的父元素虽然收到远端传来的资料
但是似乎无法如预期的把新的state值传送给子组件进行绘图
我猜想是父元素中的axios所放之生命周期函数位置所影响
不过试了很多方式，包在不同的生命周期函数
还是无法正常传递资料到子组件（BarChart.js）里面
不知各位前辈对于这样的状况
可否提供一些指点
感谢～^^