[問題] React中接收遠端資料使用D3畫圖的問題

看板Ajax作者FrankYoshi (作別人生命中的天使！)時間5年前 (2019/08/29 15:00)推噓1(1推 0噓 2→)

留言3則, 2人參與討論串1/1

版上的前輩們大大好想請教一個關於在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