Как проверить, завершена ли функция карты

Question

ОБНОВЛЕНИЕ: процесс того, что должно произойти

1. Перетаскивание пользователем нескольких файлов PDF
2. Каждый из этих файлов PDF затем визуально визуализируется один за другим для пользователя вlist
3. Пока список все еще обновляется, появится всплывающее окно с надписью «Пожалуйста, подождите, пока все не загрузится»
4. После загрузки всех PDF-файлов пользователь может прочитать PDF-файл.в коде для быстрой проверки того, что он хочет загрузить, и может добавить заголовок и описание для каждого файла PDF.
5. Каждый документ PDF получил элемент;теперь пользователь нажимает «загрузить»

Краткое описание

Итак, у меня есть функция карты, которая загружает множество элементов с большим размером файла.Я хочу загрузить каждый результат один за другим, но я хочу скрыть или заблокировать его, используя состояние «isLoading», пока все не будет загружено.

Вопрос

Как проверить, завершена ли загрузка всех функций карты?

ОБНОВЛЕНИЕ: Мой код

{this.state.pdfSrc!== null ? // IF USER HAS UPLOADED FILES
    this.state.pdfSrc.map(item => ( // MAP THROUGH THOSE FILES
        // AS LONG AS THE MAP FUNCTION KEEPS LOADING FILES, A POP UP MUST COME UP SAYING "please wait until everything is loaded"
        <div key={item.fileResult} className='uploadResultList'>
                {item.fileName}
                <embed src={item.fileResult} />
                <input type='text' placeholder='Add title*' required />
        </div>
    )) /
: 
    null
}

Но этотолько дает мне следующую ошибку

Предупреждение: функции недопустимы как дочерний элемент React.Это может произойти, если вы вернете компонент вместо рендера.Или, может быть, вы хотели вызвать эту функцию, а не возвращать ее.

Answer 1

Вместо того, чтобы делать это в одной функции, вы можете реализовать карту в методе render () вашего компонента:

render() {
  return(
    <div>
     {!!imgSrc ? (
        <PlaceholderComponents/>
      ) : this.state.imgSrc.map(item => (
           <div key={item.fileResult} className='uploadResultList'>
            <embed src={item.fileResult} />
           </div>
      }
    </div>
  )
}

Однако вам нужно будет "загрузить" данные файла перед тем, как сделать это.либо с помощью componentDidMount или componentWillMount (который сейчас устарел, поэтому старайтесь избегать его использования).Например:

    componentDidMount() {
      getImageSrcData(); // Either a function
      this.setState({ imgSrc: imgFile }) // Or from setState
    }

Если вам нужна дополнительная информация о состоянии установки из componentDidMount, см. Эту ветку: Состояние установки для componentDidMount ()

РЕДАКТИРОВАТЬ:Вы можете использовать React Suspense API, чтобы обеспечить загрузку файла перед рендерингом ...

    // You PDF Component from a separate file where the mapping is done:

    render() {
      return (
        <div>
         {this.state.imgSrc.map(item => (
           <div key={item.fileResult} className='uploadResultList'>
             <embed src={item.fileResult} />
           </div>}
        </div>
       )
     }

    const PleaseWaitComponent = React.lazy(() => import('./PleaseWaitComponent'));


    render() {
      return (
      // Displays <PleaseWaitComponent> until PDFComponent loads
       <React.Suspense fallback={<PleaseWaitComponent />}>
         <div>
           <PDFComponent />
         </div>
       </React.Suspense>
     );
    }

Answer 2

Обновление: вам может понадобиться взглянуть на создание компонента более высокого порядка, который может принять другой компонент и подождать, пока все они будут загружены, а затем изменить состояние.Возможно, что-то похожее на реагирующая загрузка ?

Вам не нужно передавать обратный вызов в setState..map не асинхронный и после завершения итерации он переместится на следующую строку в блоке.

Проблема, с которой вы здесь столкнулись, заключается в том, что вы просто вызываете map и возвращаете JSX вобратный вызов, но он никуда не денется.

Вы должны вызвать .map внутри метода render.Я не уверен, почему вы пытаетесь обновить состояние isLoading.Я думаю, что это должно быть обработано в другом месте.

render() {
  cosnt { imgSrc } = this.state;
  return (
    {
      imgSrc.map(item => (
        <div key={item.fileResult} className="uploadResultList">
          <embed src={item.fileResult} />
        </div>
      ));
    }
  )
}