iT邦幫忙

1

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

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

當我利用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>
    )
}

畫面,及資料庫是成功叫出來沒錯,但網頁的後端仍一直跑不知道在抓甚麼,如圖所示:
https://ithelp.ithome.com.tw/upload/images/20210326/20124377dBaoR7GAXE.png

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

1 個回答

1
咖咖拉
iT邦研究生 4 級 ‧ 2021-03-26 09:00:56
最佳解答

用useEffect 來呼叫

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

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

我要發表回答

立即登入回答