Reactjs React toolbox-加载JSON时，圆形ProgressBar仅为旋转设置动画

编辑：似乎问题不在于加载部分，但实际上是react不喜欢处理这么多元素。一旦我有机会确认发生了什么，我会用详细信息更新这篇文章。我的第一个测试JSON是一堆重复的条目（因此我的文件需要一些时间才能加载），它触发了一些组件呈现，我的JSON中有大约40000个条目。使用只包含3个条目的新json进行测试，每个条目都包含大量嵌套数据，因此我的文件仍然很重，需要一些时间才能加载，确实解决了这个问题

我完全不明白这是怎么可能的： 我有一个正在加载的json

在加载期间，圆路径元素不会设置动画。只需等待json完成加载，即可看到相同的ProgressBar正确设置动画

这是我的渲染函数

render() {
  console.log("Rendering");
  if (this.state.codes.length < 1) {
    return (
      <ProgressBar type="circular" mode="indeterminate" multicolor/>
    );
  }
  return (
    <div>
      <ProgressBar type="circular" mode="indeterminate" multicolor/>
       <h2>Liste des codes disponibles</h2>
      <div>
        {this.state.codes.map((code, i) => (
          <CodeSummary key={i} code={code}/>
        ))}
      </div>
    </div>
  );
}

render（）{
控制台日志（“呈现”）；
if（this.state.codes.length<1）{
返回(
);
}
返回(
可争议代码列表
{this.state.codes.map（（code，i）=>(
))}
);
}

如果有人知道我如何解决这个问题，那就太棒了！

---

感谢您阅读我的问题^ ^

所以几年后，为了确保任何有同样问题的人都能得到答案

React实际上正忙于渲染数千个元素，这冻结了svg路径偏移的基于JavaScript的动画，直到React释放线程

因此，在渲染完成之前，循环进度条不会设置动画

在这种情况下，您必须渲染大量的内容，这可能会有所帮助