如何在異步的反應功能組件中使用 useState

Question

我的App是一個聲明為async的功能組件，因為我必須在呈現視圖之前從服務器獲取數據，代碼如下

import React,{useState} from  "react";
import DashBoard from './components/DashBoard'
const axios = require('axios')


const App = async props => {
  const allDashBoardsList = await axios.get('http://localhost:9000/getAllDashBoardNames')
  const [dashboard,setDashboard] = useState(allDashBoardsList.data[0].dashboard)
  const handleDashboardChange = e => {
    setDashboard(e.target.value)
  }
   return (
    <>
      <select>
        {allDashBoardsList.data.map(e => <option value={e.dashboard} onChange  = {handleDashboardChange} > {e.dashboard} </option>)}
      </select>
      <DashBoard dashboard={dashboard} />
    </>
   )
 }



export default App

而我的 index.js 是這樣的，

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
App().then(e => {
    ReactDOM.render(e, document.getElementById('root'));
})

當我從App返回<h1> Hello </h1>時，一切正常，沒有任何錯誤，但我得到

Unhandled Rejection (Error): Invalid hook call. Hooks can only be called inside of the body of a function component

當我使用useState設置狀態時

有什么辦法可以解決這個問題，或者我是否應該使用帶有UNSAFE_componentWillMount的class component

Answer 1

嘗試將異步調用包裝在 useEffect 掛鈎中並設置可接受的默認狀態

const App = props => {
  const [dashboard,setDashboard] = useState('placeholder default state');

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios.get('http://localhost:9000/getAllDashBoardNames');
      setDashboard(allDashBoardsList.data[0].dashboard);
    };
    fetchData();
  }, []);

  const handleDashboardChange = e => {
    setDashboard(e.target.value)
  }
   return (
    <>
      <select>
        {allDashBoardsList.data.map(e => <option value={e.dashboard} onChange  = {handleDashboardChange} > {e.dashboard} </option>)}
      </select>
      <DashBoard dashboard={dashboard} />
    </>
   )
 }