如何在 ReactJS 中检查地图执行何时结束答案

【问题标题】：How to check when the map execution is over in ReactJS如何在 ReactJS 中检查地图执行何时结束
【发布时间】：2019-03-03 18:04:54
【问题描述】：

**{data.listArts.items.map((art, index) => {
                    return (
                      <a className="thumbnail" key={index}>
                        <img src={art.ArtURL}/>
                      </a>
                    );})}**

我有这段代码用于在 UI 中显示多个项目。 data.listArts.items 包含大约 100 个元素。

我想在地图执行结束时调用一个函数，以便我调用的函数可以与 reactJS 中呈现的 HTML 一起使用。

【问题讨论】：

地图真的是异步的吗？否则，只需在之后立即运行您的其他代码。
@powerbuoy 是的，地图是异步的。
不，地图不是异步的。也许您正在地图回调中执行异步任务，但地图本身不是。

标签： html reactjs css react-router

【解决方案1】：

Map 没有回调（当它到达数组末尾时），但您始终可以检查是否到达最后一个元素并调用函数。

const length = data.listArts.items.length
data.listArts.items.map((art, index) => {
if(index === length -1) {
 /* invoke callback */
}
return (
  <a className="thumbnail" key={index}>
    <img src={art.ArtURL}/>
  </a>
);})

【讨论】：

【解决方案2】：

用索引检查数组的长度

   data.listArts.items.map((art, index) => {
               if(data.listArts.items.length -1 == index){
                      //do what you want to do here may be a flag set here
               }
                return (
                  <a className="thumbnail" key={index}>
                    <img src={art.ArtURL}/>
                  </a>
                );}

     )}

【讨论】：