Javascript 在一个函数中的多个设置状态中的每一个之后，如何使react Reender？

我想向我的组件添加“加载”功能。 问题是加载不是异步函数， 因此，SETSTATE可能正在自行批处理。 让我们看一下代码：

constructor(props) {
    super(props);
    this.state = {
        loading: false,
        myArray: [1,2,3, ... ,500] //pseudo code (i want to say there is 500 elements, not exactly numbers (cuz i have objects) but to illustrate the problem it doesn't matter)
    };
}

editTable = (howManyElementsToEdit) => {
    if(howManyElementsToEdit > 50) {

        // set loading to true (and make react rerender)
        this.setState({
            loading: true,
        })

        //after react rerendering (the react knows that is in this specified line number in this method?) i want to do the calculations

        const tmp = [...this.state.myArray]; //copy the array
        for(let i=0; i<howManyElementsToEdit; i++) {
            tmp[i] += 1;
        }

        //and now after the modification is done, setState again and loading is false
        this.setState({
            myArray: tmp,
            loading: false,
        })
    } else { //there is no need to loading because not much elements need to be modified

        const tmp = [...this.state.myArray]; //copy the array
        for(let i=0; i<howManyElementsToEdit; i++) {
            tmp[i] += 1;
        }

        this.setState({
            myArray: tmp,
        })

    }   
}

this.setState({
  loading: true,
})
setTimeout(() => {
  const tmp = [...this.state.myArray]; //copy the array
  for(let i=0; i<howManyElementsToEdit; i++) {
    tmp[i] += 1;
  }

  this.setState({
    myArray: tmp,
    loading: false,
  });
}

构造函数（道具）{
超级（道具）；
此.state={
加载：false，
myArray:[1,2,3，…，500]//伪代码（我想说有500个元素，不完全是数字（因为我有对象），但为了说明问题，这并不重要）
};
}
编辑表=（howManyElementsToEdit）=>{
如果（Howmanneylementstoedit>50）{
//将加载设置为真（并使反应重新加载）
这是我的国家({
加载：对，
})
//在react重新招标后（react知道此方法中的指定行号是多少？），我想进行计算
const tmp=[…this.state.myArray]；//复制数组
for（让i=0；iReact native只有一个js线程，因此执行昂贵的计算将阻塞应用程序（您将无法与它交互）

也就是说，如果加载时间足够长，足以显示微调器，则可能应该异步执行，而不是在setState（）之后（如果足够快，则可能不需要微调器显示100毫秒）

当您调用setState（）然后执行一系列工作时，组件在该工作完成之前不会重新渲染，因此这里不存在两个setState（）-s的问题。即使只有一个setState（）-s，它也不会工作

幸运的是，react native的
ActivityIndicator
组件的动画在本机UI线程上运行，因此它不会受到执行昂贵工作的js线程的影响。因此，您可以做的是稍微延迟工作，以使setState（）生效。代码如下：

constructor(props) {
    super(props);
    this.state = {
        loading: false,
        myArray: [1,2,3, ... ,500] //pseudo code (i want to say there is 500 elements, not exactly numbers (cuz i have objects) but to illustrate the problem it doesn't matter)
    };
}

editTable = (howManyElementsToEdit) => {
    if(howManyElementsToEdit > 50) {

        // set loading to true (and make react rerender)
        this.setState({
            loading: true,
        })

        //after react rerendering (the react knows that is in this specified line number in this method?) i want to do the calculations

        const tmp = [...this.state.myArray]; //copy the array
        for(let i=0; i<howManyElementsToEdit; i++) {
            tmp[i] += 1;
        }

        //and now after the modification is done, setState again and loading is false
        this.setState({
            myArray: tmp,
            loading: false,
        })
    } else { //there is no need to loading because not much elements need to be modified

        const tmp = [...this.state.myArray]; //copy the array
        for(let i=0; i<howManyElementsToEdit; i++) {
            tmp[i] += 1;
        }

        this.setState({
            myArray: tmp,
        })

    }   
}

this.setState({
  loading: true,
})
setTimeout(() => {
  const tmp = [...this.state.myArray]; //copy the array
  for(let i=0; i<howManyElementsToEdit; i++) {
    tmp[i] += 1;
  }

  this.setState({
    myArray: tmp,
    loading: false,
  });
}

this.setState({
加载：对，
})
设置超时（（）=>{
const tmp=[…this.state.myArray]；//复制数组
对于（让i=0；iWhy-1？我不明白。-2？…呃，为什么？我只想加载…天哪，谢谢你。我知道这不应该发生，但在整个项目中有一种情况，当这种情况可能发生时（或者当真的有很多数据时）。