Javascript 从动态生成的表单访问状态，多层次深入

此表单的状态由三个级别组成：A>B>C

A: [
            {
                name: "foo",
                ...
                B: [
                    {
                        name: "bar",
                        ...
                        C:[
                            {
                                name: "baz",
                                ...
                            },
                            {
                                name: "bat":,
                                ...
                            }
                        ]
                    },
               ]
            },
            ...
]

基本上，在三个互为子资源的资源中，每个名称属性都需要一个输入字段

 <div className="subvariation-tree">
                {
                this.state.A.map( (a, aIdx) =>
                    <div key={aIdx}>
                        <input type="text"
                            value={this.state.A[aIdx].name}
                            onChange={this.handleInputChange} />
                            {
                            a.B.map( (b, bIdx)  =>
                                <div key={bIdx}>
                                    <input type="text"
                                        value={this.state.A[aIdx].B[bIdx].name}
                                        onChange={this.handleInputChange} />
                                        {
                                        b.C.map( (c, cIdx) =>
                                            <div key={cIdx} >
                                                <input type="text"
                                                    value={this.state.A[aIdx].B[bIdx].C[cIdx]}
                                                    onChange={this.handleInputChange} />
                                            </div>
                                        )
                                        }
                                    </div>
                                </div>
                            )
                            }
                        </div>
                    </div>
                )
                }
            </div>

{
this.state.A.map（（A，aIdx）=>
{
a、 B.map（（B，bIdx）=>
{
b、 C.map（（C，cIdx）=>
)
}
)
}
)
}

问题是，我想这似乎很明显，但我无法访问aIdx，例如在C属性的循环中

---

这有什么办法吗？这是一个可笑的设计吗？React的荒谬用例？我很难接受这个想法。我想我可以用普通的JavaScript来管理它，但我正在尝试学习React。

你可以简单地像这样写

{
this.state.A.map（（A，aIdx）=>{
返回
{
a、 B.map（（B，bIdx）=>{
返回
{
b、 C.map（（C，cIdx）=>{
返回
})
}
})
}
})
}

您实际上应该可以访问

C

循环中的

aIdx

如果问题是它在输入中显示

[object object]

，那是因为您为

C

元素输入了

.name

所以不是

value={this.state.A[aIdx].B[bIdx].C[cIdx]}

使用

但是正如前面提到的，您可以直接使用

a.name

、

b.name

和

c.name

，因为您有一个用于迭代对象的局部变量

---

下面是两种方法的演示：

我正在尝试更好地理解这个问题-为什么需要名称属性的输入字段？谢谢！因此，这些是“变体”和“子变体类别”以及“子变体”，用于为电子商务模型创建不同的产品“版本”。假设产品是一件衬衫，那么第一个层次的变化可能是颜色：[红、白、蓝等]，然后这些需要子类别，比如尺寸，然后需要自己的变化，比如[s、m、l、xl等]——我在两个层次上停止它，但这似乎是一个相当标准的电子商务功能，所以我需要以某种方式表示它。我对此感到非常困惑，尽管这个“产品变体管理仪表板”的用户需要能够添加不同的变体，基本上是他们想要/需要的。这不是

this.state.A[aIdx].B[bIdx].name

与

B.name

相同吗？此时，在A和B中，您是相同的迭代。（与

a.name

和

c.name

相同）。顺便说一句，您应该可以访问

c

循环中的

aIdx

。您确定问题不是最后缺少的

.name

吗？因此

map

的参数将保留对原始状态的引用？我本以为map会制作一个副本，所以当您在状态中更新b时，您将失去与this.state.a的连接。如果其中的任何内容发生更改，无论是b还是C，整个对象都将符合重新渲染的条件。基于其diff机制的React将更新dom。问题是该值不能反映状态的变化，使其成为一种基本上无用的形式。它应该像这样工作吗？或者说，在React中跟踪一个多层的、动态的表单基本上是不可能的？Ack nvm，这又是我自己的错误。

value={this.state.A[aIdx].B[bIdx].C[cIdx].name}