如何检查地图功能是否完成

Question

更新：必须发生的过程

用户拖放多个 pdf 文件
然后，这些 pdf 文件中的每一个都在列表中为用户一个一个地呈现出来
只要列表还在更新，就会弹出一个窗口说 "please wait until everything is loaded"
加载所有 pdf 后，用户可以阅读嵌入的 pdf 以快速检查这是否是他想要上传的内容，并可以为每个 pdf 添加标题和描述。
每个pdf都收到一个条目；用户现在点击 'upload'

简要说明

所以我有一个地图功能，可以加载很多文件大小很大的项目。我想一个一个地加载每个结果，但我想使用 '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
}

但这只会给我以下错误

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

Answer 1

更新：您可能需要考虑创建一个更高阶的组件，它可以采用另一个组件并等待所有组件加载完毕，然后更改状态。也许类似于 react-loadable?

您不需要将回调传递到 setState。 .map 不是异步的，一旦迭代完成，它将移至块中的下一行。

您在这里遇到的问题是，您只是调用 map 并在回调中返回 JSX，但它不会去任何地方。

您应该在 render 方法中调用 .map。我不确定您为什么要尝试更新 isLoading 状态。我认为这应该在别处处理。

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

Answer 2

您可以在组件的 render() 方法中实现地图，而不是在单个函数中执行此操作：

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

但是，在执行此操作之前，您需要 'load' 文件数据，使用 componentDidMount 或 componentWillMount（现已弃用，因此尽量避免使用它）。例如：

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

如果您想了解有关从 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>
     );
    }

如何检查地图功能是否完成

How to check if map function is finished

javascript

state

dictionary

loading

reactjs

更新：必须发生的过程

简要说明

问题

更新：我的代码