React中从多层嵌套动态生成表单访问状态的实现问询

处理嵌套状态的核心在于不可变更新——你不能直接修改原state对象或数组，必须创建它们的副本并更新对应部分，这样React才能检测到状态变化并触发重渲染。下面是完整的实现方案：

1. 完善渲染代码，传递层级索引 #

首先，在渲染每一层输入框时，把对应的层级索引（aIdx、bIdx、cIdx）传递给handleInputChange，让事件处理函数能精准定位要修改的元素：

<div className="subvariation-tree">
  {this.state.A.map((a, aIdx) => (
    <div key={aIdx} className="a-level">
      {/* A层name输入框 */}
      <input
        type="text"
        value={a.name}
        onChange={(e) => this.handleInputChange('A', aIdx, null, null, e.target.value)}
        placeholder="A层name"
      />
      {/* 渲染B层 */}
      {a.B.map((b, bIdx) => (
        <div key={bIdx} className="b-level" style={{ marginLeft: '20px' }}>
          {/* B层name输入框 */}
          <input
            type="text"
            value={b.name}
            onChange={(e) => this.handleInputChange('B', aIdx, bIdx, null, e.target.value)}
            placeholder="B层name"
          />
          {/* 渲染C层 */}
          {b.C.map((c, cIdx) => (
            <div key={cIdx} className="c-level" style={{ marginLeft: '40px' }}>
              {/* C层name输入框 */}
              <input
                type="text"
                value={c.name}
                onChange={(e) => this.handleInputChange('C', aIdx, bIdx, cIdx, e.target.value)}
                placeholder="C层name"
              />
            </div>
          ))}
        </div>
      ))}
    </div>
  ))}
</div>

2. 实现不可变更新的handleInputChange函数 #

这个函数会根据传入的层级标识和索引，逐层复制状态并更新对应name属性：

handleInputChange = (level, aIdx, bIdx, cIdx, newValue) => {
  this.setState(prevState => {
    // 创建A数组的副本，避免直接修改原状态
    const updatedA = [...prevState.A];

    if (level === 'A') {
      // 复制A层对应元素，修改name后替换原位置
      const updatedAItem = {...updatedA[aIdx], name: newValue};
      updatedA[aIdx] = updatedAItem;
    } else if (level === 'B') {
      // 逐层复制：先复制A层元素，再复制它的B数组
      const updatedAItem = {...updatedA[aIdx]};
      const updatedB = [...updatedAItem.B];
      // 修改B层对应元素的name
      updatedB[bIdx] = {...updatedB[bIdx], name: newValue};
      updatedAItem.B = updatedB;
      updatedA[aIdx] = updatedAItem;
    } else if (level === 'C') {
      // 三层嵌套都要复制，确保原状态不被篡改
      const updatedAItem = {...updatedA[aIdx]};
      const updatedB = [...updatedAItem.B];
      const updatedBItem = {...updatedB[bIdx]};
      const updatedC = [...updatedBItem.C];
      // 修改C层对应元素的name
      updatedC[cIdx] = {...updatedC[cIdx], name: newValue};
      updatedBItem.C = updatedC;
      updatedB[bIdx] = updatedBItem;
      updatedAItem.B = updatedB;
      updatedA[aIdx] = updatedAItem;
    }

    // 返回新的状态对象
    return { A: updatedA };
  });
};

关键细节说明 #

• 不可变更新的必要性：React依赖状态的引用变化来触发重渲染，直接修改原state的属性/元素不会触发更新，必须通过创建副本的方式生成新的状态。
• 函数式setState：使用setState(prevState => {})的形式，确保我们基于最新的状态进行修改，避免因React异步更新机制导致的状态不一致问题。
• 扩展性：如果后续需要添加删除嵌套元素的功能，逻辑也是类似的——始终创建对应层级的副本，修改后替换原数组/对象即可。

内容的提问来源于stack exchange，提问作者Daniel Thompson