My app fetches some data from a server using useEffect
and passes it as a prop to a child component. I would like to pause the rendering of the child component until the data is completely fetched and loaded into a state
. How can I achieve this?
My code(simplified):
const App = () => {
const [data, setData] = useState(undefined)
useEffect(async () => {
const fetchedData = await getDataFromServer()
setData(fetchedData)
}, [])
return (
<div>
<ChildComponent data={data} /> // How to pause rendering until data != undefined?
</div>
)
}
You can achieve this by using a ternary operator, since undefined
is a falsy value the condition will return false
and it will show Loading...
until the data
is fetched and after it is done fetching the condition will become true
since data
is no longer undefined
ie falsy
that's how the data
will be passed to the child component only after it is fetched.
const App = () => {
const [data, setData] = useState(undefined)
useEffect(async () => {
const fetchedData = await getDataFromServer()
setData(fetchedData)
}, [])
return (
<div>
{data ? <ChildComponent data={data} /> : <p>Loading...</p>}
</div>
)
}
More on falsy
values here
More on ternary operator
in Javascript here
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.