Javascript 在array.map（）运行时调用其他代码

我有以下代码：

{myArray.map(arr => { 
    return ( <MyComponent title={arr.ttile} /> ) 
})}

{myArray.map（arr=>{
返回（）
})}

---

我想调用加载组件，而映射（）尚未完全完成。有可能吗？如果是，我将如何做到这一点？

如果您希望实际能够看到加载指示器后面/下面加载的组件，那么它将更具挑战性，可能需要比此建议解决方案更多的工作。但是，如果您只想在

.map（）

原型函数工作时显示加载指示器，我相信这可以实现以下目的：

constructor(props) {
    super(props);
    this.state = { loadingIndicator : null };
}

getArrayOfMyComponents() {
    return myArray.map((arr, index) => {
        if (index === 0) {
            const loadingIndicator = <Loading/>;
            this.setState({ loadingIndicator : loadingIndicator });
        } else if (index === myArray.length - 1) {
            this.setState({ loadingIndicator : null });
        }
        return ( <MyComponent title={arr.title} /> );
    });
}

render() {
    const arrayOfMyComponents = this.getArrayOfMyComponents();
    return (
        <div>
            {this.state.loadingIndicator}
            {arrayOfMyComponents}
        </div>
    );
}

构造函数（道具）{
超级（道具）；
this.state={loadingIndicator:null}；
}
getArrayOfMyComponents（）{
返回myArray.map（（arr，index）=>{
如果（索引==0）{
常量加载指示器=；
this.setState（{loadingIndicator:loadingIndicator}）；
}else if（index==myArray.length-1）{
this.setState（{loadingIndicator:null}）；
}
返回（）；
});
}
render（）{
const arrayOfMyComponents=this.getArrayOfMyComponents（）；
返回(
{this.state.loadingIndicator}
{arrayOfMyComponents}
);
}

---

Array.prototype.map（）实际上只是Array.prototype.forEach（）的一个更高级版本。因此，我们可以利用这一事实在第一次迭代中启动加载指示器的显示，并在最后一次迭代中删除它。

您可以在一个状态中有一个布尔值，并且在启动array map之前，将布尔值置为true并运行另一个代码o组件渲染，然后在array maps结束时将该状态置为false，对于redux im，使用状态fetch start、fetching、fetched，然后您可以控制情况

如果您是从API获取数据，您可能希望像往常一样呈现数据，但您可以在

componentDidMount

钩子中获取数据，例如，保留一段额外的状态

isLoading

，您可以在渲染方法中使用它来决定是否应显示加载组件

示例

函数getBooks（）{ 返回新承诺（解决=>{ setTimeout（（）=>resolve（[{title:foo}，{title:bar}]），1000）； }); } 功能MyComponent（道具）{ 返回{props.title}； } 类应用程序扩展了React.Component{ 状态={books:[]，isLoading:true}； componentDidMount（）{ getBooks（）。然后（books=>{ this.setState（{books，isload:false}）； }); } render（）{ const{isLoading，books}=this.state； 如果（孤岛加载）{ 返回装载； } 返回( {this.state.books.map（book=>）} ); } } render（，document.getElementById（“根”））

这是不可能的，因为

map

是同步的，您不能在render方法中执行任何异步逻辑。

map

本身几乎会立即返回，这是肯定的？您为什么要这样做？您能详细说明您的用例吗？myArray是一个来自外部API的书籍数组。大约需要2到3秒钟才能完成。现在我们只看到空白页。我想放置一个加载组件。这并不像你想象的那样

setState（）

是异步的，而

map（）

不是。因此，如果在

map（）

的内部调用

setState

，它将不会立即被组件反映出来。迭代将继续进行。正确的解决方案是创建一个

Promise

，用映射列表进行解析，同时呈现一个指示符。或者您可以使用

async

wait

。超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate内重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量以防止无限循环。错误发生在第行：

this.setState（{loadingIndicator:loadingIndicator}）