Блог

Я знаю, как отобразить экран загрузки для одного вызова api или эффекта использования. Но у меня есть 5 компонентов внутри моего домашнего компонента. И я хочу отображать экран загрузки до тех пор, пока не будут загружены все эффекты использования в каждом компоненте. И я делаю несколько вызовов api.

Таким образом, я не могу заставить экран загрузки исчезнуть в одном компоненте. Если я это сделаю, другие будут загружаться поздно, и это будет видно пользователям.

Как с этим справиться? есть идеи?

Самый простой способ — использовать глобальное состояние. Как Переделка. Но вы также можете создать родительское состояние и обратный вызов, например

 const [loadedCount, setLoadedCount] = useState(0);
const handleLoaded = () => setLoadedCount(loadedCount  1);
 

Затем вы передаете загруженный предмет детскому реквизиту и формируете его там, чтобы запустить. Когда loadedCount === 5 все компоненты будут загружены. Но это не очень хорошее решение. Лучше использовать глобальное состояние.

Вы могли бы завернуть их в Обещание.все. Что-то вроде этого

     const [loading, setLoading] = useState(true)
    const firstCall = new Promise(() => console.log('foo'));
    const secondCall =new Promise((resolve) => {
        setTimeout(() => {
            resolve(true);
        }, 5000);
    })
    const thirdCall = async () => await fetch(...) // async functions implicitly return a Promise
    const promises = [firstCall, secondCall];
    Promise.all(promises).then(() => setLoading(false));