ReactJS logi c для рендеринга приложения

Question

Так что я не лучший в React. Я создаю приложение, которое получает информацию о пользователе от внешней конечной точки и сохраняет ее в локальном хранилище. Я понимаю, что мое реакционное приложение загружает html до обновления состояния этих данных и просто не отображает его во внешнем интерфейсе. Я хотел бы, чтобы приложение подождало, пока эти элементы не будут в локальном хранилище, перед рендерингом. Есть предложения?

Answer 1

Используя функциональные компоненты, вы обычно делаете что-то вроде:

function App() {
   const [data, setData] = useState(null)

   useEffect(() => {
     // Fetching or other async logic here...
     fetch('/some/url/here')
       .then(response => response.json())
       .then(data => setData) // save the result in state
   }, [])

   // Not loaded yet, return nothing.
   if (!data) {
     return null
   }

   // Loaded! return your app.
   return <div>Fetched data: { data.myData }</div>
}

Answer 2

вы можете использовать asyn c и ждать этого.

async componentDidMount(){
   await fetch()....
   /* your code goes here*/
}