Javascript 访问react中动态创建的元素集

我已经使用了straight JS，我正试图通过将它翻译成React，在盖茨比网站上实现同样的功能。基本上，重点是让字母以随机顺序出现，但要在正确的位置

我陷入困境的一点是（我还没有反应过来）如何以随机顺序创建和访问元素集（跨度），以便能够让它们以该顺序显示

类关于扩展组件{
建造师（道具）{
超级（道具）；
此.state={
aboutText:“这是对紧急广播系统的测试”，
aboutElements:[]
}
}
shuffleArray（阵列）{
对于（var i=array.length-1；i>0；i--）{
var j=Math.floor（Math.random（）*（i+1））；
var-temp=数组[i]；
数组[i]=数组[j]；
数组[j]=温度；
}
返回数组；
}
render（）{
const arrrletters=this.state.aboutText.split（“”）；
让arrNumbers=Array.from（Array（arrLetters.length.keys（））；
arrNumbers=this.shuffleArray（arrNumbers）；
const arrspands=arrrletters.map（（字母，索引）=>{letter}）；
console.log（arrspands）
this.setState（{aboutElements:arrSpans}）
arrNumber.forEach（函数（项、索引）{
设targetSpan=arrSpans.filter（el=>el.key==item）；
//你需要在这里看到这封信
});
返回(
{this.state.aboutElements}

)
}
}
导出默认值关于

所以我要创建字母数组，将其转换为元素数组，但当我试图将其转换为一种状态时，我得到了以下错误：

超过最大更新深度。当组件在

componentWillUpdate

或

componentdiddupdate

内重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量以防止无限循环

---

我做错了什么？

问题是您正在render方法内部调用

this.setState（{aboutElements:arrSpans}）

。每次状态改变时都会调用render函数，因此蛇在这里咬住它的尾巴，从而创建一个无尽的render->setState->render->setState->循环

但好消息是，您可以只使用局部变量渲染元素，而不使用状态：

render（）{
const arrrletters=this.state.aboutText.split（“”）；
const arrspands=arrrletters.map（（字母，索引）=>{letter}）；
console.log（arrspands）
//this.setState（{aboutElements:arrSpans}）//啊，谢谢，是的，这让无限循环有了意义。但这并没有让我达到目的，因为我一开始就是这么做的，只是把VARABLE放在标记中，这样就行了。问题是，我开始尝试通过状态访问所有这些
，以使它们可见以交错顺序通过CSS。ArrNumber的目的是让一组随机的数字以随机顺序修改跨距。我的第一反应是在跨距生成后通过DOM访问跨距，但我知道这不是反应方式。你可以直接洗牌元素，因为arrSpans只是一个数组，你可以使用
{this.shuffleArray（arrSpans）}
在你的模板中否，这会给我一段混乱的文本，这不是我要找的。字母的顺序应该正确，但它们出现的顺序应该是随机的。看看我文章顶部的链接，看看我想要什么。只是用一个示例沙盒的链接更新了我的答案。