React多层嵌套受控组件的问卷数据统一处理方案咨询

云原生阿岚

2026-9-25

问题解答

现有代码问题

你当前的写法无法正确完成状态更新，核心逻辑错误点如下：
你传入handleChange的questionName是字符串类型的问题键名（例如questionOne），代码中的[questionName[name]]是尝试从字符串上读取name对应的属性，这个值必然为undefined，最终只会给根survey对象新增一个无效的undefined键，不会修改目标问题的对应字段。

正确实现写法

推荐使用React状态的函数式更新写法，避免闭包导致的状态更新异常，正确的状态更新逻辑如下：

const handleChange = (e, questionName) => {
  const { name, value } = e.target;
  setSurvey(prev => ({
    // 先保留所有其他问题的数据
    ...prev,
    // 定位到要修改的问题
    [questionName]: {
      // 保留当前问题的其他字段
      ...prev[questionName],
      // 更新目标字段的值
      [name]: value
    }
  }));
};

优化建议

状态结构优化：如果问卷题目后续可能增删，不要写死questionOne/questionTwo这类固定键名，改用数组存储题目数据，渲染时直接遍历数组生成表单项，扩展性更强：

const [survey, setSurvey] = useState([
  { id: 1, title: '', optionA: '', optionB: '', optionC: '' },
  { id: 2, title: '', optionA: '', optionB: '', optionC: '' },
  // 新增题目仅需往数组加元素即可，无需修改其他逻辑
])

事件绑定优化：可以把问题标识和字段名合并写到表单项的name属性中，不用额外传参，简化调用逻辑：

// 表单项绑定示例：<input name="questionOne.a" onChange={handleChange} />
const handleChange = (e) => {
  const [questionKey, fieldKey] = e.target.name.split('.');
  const { value } = e.target;
  setSurvey(prev => ({
    ...prev,
    [questionKey]: {
      ...prev[questionKey],
      [fieldKey]: value
    }
  }));
};