React 呼叫某Component的同時執行資料庫抓值

react reactjs axios mysql react-router-dom

HaoChen 2021-03-26 00:33:50 ‧ 3016 瀏覽

分享至

各位大大好~小弟在製作前後端網頁時遇到一個問題

當我利用react-router-dom
<Route path='/test' component={Test} />
轉址後, 該頁面要直接向資料庫請求資料，並顯示出來

故在Component "Test"中寫到類似以下程式碼

function Test() => {
const[testList, setTestList] = useState([]);

const fetchList = () => {
    Axios.get('http://localhost:3001/test').then((res) => {
      setTestList(res.data);
    });
  };
  
  fetchList();
  
  return(testList.map((val, key) => {
    return (
    <div>
     <h1>{val.name}</h1>
     <h1>{val.age}</h1>
    </div>
    )
}

畫面，及資料庫是成功叫出來沒錯，但網頁的後端仍一直跑不知道在抓甚麼，如圖所示:

網路查過資料後，推測是fetchList();放在component中所致，想問各位大大有甚麼方式寫可以解決這類的問題QQ
或是有更好的寫法都希望可以像各位大大學習!
謝謝您!!~

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

咖咖拉

iT邦好手 1 級 ‧ 2021-03-26 09:00:56

最佳解答

用useEffect 來呼叫

  useEffect(() => {
    Axios.get('http://localhost:3001/test').then((res) => {
      setTestList(res.data);
    });
   },[])

回應 1
分享
檢舉

HaoChen iT邦新手 4 級 ‧ 2021-03-26 09:57:05 檢舉

昨天半夜也這樣是成功了!!! 果然是這樣沒錯哈哈謝謝您的解答與回覆~~

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22207 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙