Javascript 使用setTimeout暂停执行以添加动画

我是react js的初学者，在函数中操作DOM元素时遇到困难
我正在尝试使用react构建一个排序可视化工具。为此，我有一个div，它由一个使用map函数的数组组成：

{array.map((value, index) => (
    <div>
        <div 
            className="bar" 
            key={index} 
            ref = {(value) => this.arrayRef[index] = value}
            style={{height: `${value}px`}}></div>
    </div>
))}

现在，当我使用for循环来更新整个数组的颜色时，我得到一个错误，它说“无法读取未定义的属性样式”。早些时候，我使用document.getElementsbyClassName访问div栏，但在阅读了几篇文章之后，我收集到的信息是，最好使用refs，因为document.getElementsbyClassName会在创建元素之前尝试访问DOM时出错

这就是我的意思 对于（i=0；i{ this.arrayRef[i].style.backgroundColor='red'； }, 500) }

---

我认为这里的setTimeout可能有问题，因为如果省略setTimeout部分，整个数组的颜色会根据需要更改。但是我想以某种方式显示动画，所以我希望它在为整个数组的每个元素着色之前暂停一点，而不是不间断地更改颜色。为此，我认为setTimeout是最好的选择，我尝试使用async/await，但我仍然不太习惯使用承诺。对可能出现的问题有什么建议吗？非常感谢您的帮助

如果你想一个接一个地做，你必须像这样增加计时器：

for(i=0;i<this.arrayRef.length;i++){
  setTimeout(()=>{
     this.arrayRef[i].style.backgroundColor = 'red';
  }, 500 * i)
}

---

如果你想一个接一个地做，你必须像这样增加计时器：

for(i=0;i<this.arrayRef.length;i++){
  setTimeout(()=>{
     this.arrayRef[i].style.backgroundColor = 'red';
  }, 500 * i)
}

---

时间不是什么大问题，当我运行应用程序时，当它执行这行时。arrayRef[I]。。。它显示了一个错误，说“无法设置未定义的属性样式”哦，当然，等等，我编辑答案。。你的i是最后一个wen setTimeout executef据我所知，这个程序的执行过程是for循环一直在运行，但是for循环中的setTimeout正在等待我们设置的时间，因此在最后，当i递增时，setTimeout可能仍在运行一些this.arrayRef[i].style.backgroundColor，但这次它遇到错误，因为没有i+1元素。你认为可能是这样吗？时间不是什么大问题，当我运行应用程序时，当它执行这行时。arrayRef[I]。。。它显示了一个错误，说“无法设置未定义的属性样式”哦，当然，等等，我编辑答案。。你的i是最后一个wen setTimeout executef据我所知，这个程序的执行过程是for循环一直在运行，但是for循环中的setTimeout正在等待我们设置的时间，因此在最后，当i递增时，setTimeout可能仍在运行一些this.arrayRef[i].style.backgroundColor，但这次它遇到错误，因为没有i+1元素。你认为可能是这样吗？？