推 powyo: ajax取完值後要bind(this) 08/29 16:54
→ FrankYoshi: 已解決，子組件需要使用ComponentDidUpdate() 08/29 18:43
版上的前輩們大大好
想請教一個關於在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）裡面
不知各位前輩對於這樣的狀況
可否提供一些指點
感謝～^^
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 210.242.155.82 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/Ajax/M.1567062016.A.E4B.html