Question

更新：必须发生的过程

用户拖放多个pdf文件
然后在列表中为用户逐个视觉呈现这些pdf文件
只要列表仍在更新，就会弹出一个窗口，提示“请等待所有内容加载完毕”
加载所有pdf文件后，用户可以阅读嵌入文件中的pdf文件，以快速检查这是否是他要上传的内容，并可以为每个pdf文件添加标题和说明。
每个pdf都收到一个项目；用户现在点击“上传”

简要说明

所以我有一个map函数，可以加载很多文件较大的项目。我想一个一个地加载每个结果，但是我想使用“ 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子元素无效。如果发生这种情况您返回一个Component而不是从render返回。或许您打算调用此函数而不是返回它。

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设置状态的更多信息，请参见以下线程： Setting state on 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

更新：您可能需要研究创建可以使用另一个组件的更高级别的组件，并等到所有这些组件都装入后再更改状态。也许与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>
      ));
    }
  )
}

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

更新：必须发生的过程

简要说明

问题

更新：我的代码

2 个答案: