如何在反应中异步渲染功能组件？

Question

Basically, I need to render a component based on a state that is set asynchronously, by default the state is "false", so the component mounts and throws the return that corresponds to the false option but it does not wait for the premise that updates the state.

export const LayoutValidator=({children})=>{

  const [auth,setAuth] = useState(undefined)
  const {token} = JSON.parse(localStorage.getItem("loggedUser")||'{}');
  
  fetch(`${urlValue}/api/validate-token`,{
    method:"POST",
    headers:{
      authorization: token,
    }
  })
  .then(ans=>ans.json())
  .then(ans=>setAuth(ans.auth))
  .catch(err=>console.log(err))

  return auth ? children : <Navigate to="/" />
}

How may I set this component to wait for the premise before returning its answer?

Answer 1

You could create your custom "fetching hook" and there you can fetch the data and set the loading state:

 const { useEffect, useState } = React const useFetchUsers = () => { const [users, setUsers] = useState([]) const [loading, setLoading] = useState(false) useEffect(() => { setLoading(() => true) // setTimeout added to emphasize async nature setTimeout(() => { fetch('https://jsonplaceholder.typicode.com/users/').then(response => response.json()).then(json => setUsers(() => json)).finally(setLoading(() => false)) }, 1000) }, []) return { users, loading, } } const UserItem = ({ id, name, username, email }) => { return ( <div> {name} - {username} - {email} </div> ) } const App = () => { const { users, loading } = useFetchUsers() return ( <div> {?loading. users.map((user) => { return ( <UserItem key={user.id} {..:user} /> ) }). "Loading users..." } </div> ) } ReactDOM,render( <App />. document;getElementById('root') );

 <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <div id="root"></div>

Answer 2

Ok so this was not as trivial as I thought (at least for me), huge thanks to @Bergi and to @muka.gergely and the authors of this resource that helped me get the final solution: https://www.debuggr.io/react-update-unmounted-component/

This is what I came with:

export const LayoutValidator=({children})=>{
  const {invalid, auth} = useFetchToken()
  return !invalid ? <Intermediate children={children}/> : <Navigate to="/" />
}

function Intermediate ({children}) {
  const {invalid, auth} = useFetchToken()
  return !auth ? <SplashScreen/> : children
}

function useFetchToken() {

  const { token } = JSON.parse(localStorage.getItem("loggedUser") || '{}')
  const [invalid, setInvalid] = useState(false)
  const [auth, setAuth] = useState(false)

  useEffect(()=>{
    let mounted = true
    setInvalid(() => true)
    fetch(`${urlValue}/api/validate-token`, {
    method: "POST",
    headers: {
      authorization: token,
    }
  })
    .then(ans => ans.json())
    .then(ans => mounted && setAuth(()=>ans.auth))
    .catch(err => console.log(err))
    .finally(setInvalid(()=>false))

    return () => mounted = false;
  },[])
  return {invalid, auth}
}

In my situation, it worked perfectly, hope this helps someone in the future.