使用setState实现多步骤问卷：求助将响应数据存入对象

AI 小北

2026-8-2

解决Mantine Radio.Group无法更新useState表单数据的问题

你的问题核心在于Radio.Group的onChange逻辑没有正确获取并使用选中的值，当前代码只是把原formData的旧值重新赋值，自然不会触发状态更新。

错误原因分析

Mantine的Radio.Group组件的onChange回调会接收当前选中的选项值作为参数，但你现在的代码完全没有用到这个参数，而是直接复用了formData['1']的旧值，相当于状态没有发生变化，所以组件不会更新。

修正后的子组件代码

把onChange改成接收选中值，并更新到formData对应的键上：

return (
  <>
    <Text>{questions['1']}</Text>

    <Radio.Group
      value={formData['1']}
      onChange={(value) => {
        // 接收选中的value，更新formData中键为'1'的值
        setFormData({
          ...formData,
          '1': value,
        });
      }}
    >
      {/* 你的Radio选项 */}
    </Radio.Group>
  </>
);

额外优化建议

如果问卷有20道题，重复写相同的onChange逻辑会很冗余，可以：

提取通用的问卷题目组件，接收questionId作为参数，统一处理更新逻辑：

// 通用题目组件
const QuestionItem = ({ questionId, questionText, formData, setFormData }) => {
  return (
    <>
      <Text>{questionText}</Text>
      <Radio.Group
        value={formData[questionId]}
        onChange={(value) => {
          setFormData(prev => ({
            ...prev,
            [questionId]: value,
          }));
        }}
      >
        {/* Radio选项 */}
      </Radio.Group>
    </>
  );
};

这里用函数式更新（setFormData(prev => ...)）可以避免闭包导致的状态更新异常，尤其是在分页切换场景下更可靠。