Next.js嵌套表单字段值未设置及受控输入错误问题

1. 修复minSelections提交时无值的问题 #

• 核心原因：表单状态初始化时answer_data.config.minSelections未定义，或子组件更新字段时未正确同步到父组件状态
• 处理步骤：
  • 初始化表单状态时，给config.minSelections设置默认值，确保字段从一开始就存在：

    // 父组件状态初始化示例
    const [formState, setFormState] = useState({
      answer_data: {
        data: [],
        config: {
          minSelections: 0 // 显式设置默认值
        }
      }
    });
    

  • 子组件更新minSelections时，通过父组件传递的状态更新函数，用不可变方式修改对应字段：

    // 子组件中处理输入变化的示例
    const handleMinChange = (e) => {
      const numValue = parseInt(e.target.value, 10);
      onChange(prevState => ({
        ...prevState,
        answer_data: {
          ...prevState.answer_data,
          config: {
            ...prevState.answer_data.config,
            minSelections: numValue
          }
        }
      }));
    };
    

2. 解决“受控/非受控输入切换”错误 #

• 核心原因：输入框初始value为undefined，首次输入后变为确定值，触发React的受控组件校验错误
• 处理步骤：
  • 确保输入框value始终有确定值，结合上述初始化逻辑，直接绑定已定义的状态字段：

    // 子组件输入框写法
    <input
      type="number"
      value={answer_data.config.minSelections}
      onChange={handleMinChange}
      min="0"
    />
    

  • 若无法提前设置默认值，可通过兜底值避免value为undefined：

    value={answer_data.config.minSelections ?? 0}
    

额外注意点 #

• 嵌套状态更新必须使用不可变方式，禁止直接修改原状态对象，确保React能正确识别状态变化
• 保证子组件接收的answer_data结构完整，必要时可在父组件初始化时构建好完整的状态层级

内容的提问来源于stack exchange，提问作者Anuj TBE