本文详解如何在 react 中利用 usestate 正确累积多个表单字段（如题号、题目、答案）构成的对象数组，避免因状态重置导致数据丢失，并提供可直接复用的函数式更新方案。
本文详解如何在 react 中利用 usestate 正确累积多个表单字段（如题号、题目、答案）构成的对象数组，避免因状态重置导致数据丢失，并提供可直接复用的函数式更新方案。
在构建动态问卷、多步骤表单或标签页式答题界面时，常需将用户在不同 Tab 或步骤中填写的结构化数据（如 {questionNumber, questionTitle, answer}）统一收集为一个对象数组。若直接在每次提交时用 setQuizData([...quizData, newItem]) 但未正确处理状态更新机制，极易因闭包捕获旧状态而导致前序数据丢失——这正是初学者常见的“数组总被重置为空”的根源。
关键在于：必须使用函数式更新（functional update）确保获取最新状态，尤其当更新逻辑依赖于当前 state 时。以下是推荐实现方式：
import { useState } from 'react';
function QuizForm() {
const [quizData, setQuizData] = useState([]);
// ✅ 正确：使用函数式更新，避免闭包陷阱
const addResponse = (questionNumber, questionTitle, answer) => {
setQuizData(prev => [
...prev,
{ questionNumber, questionTitle, answer }
]);
};
// 示例：模拟“下一题”按钮点击
const handleNext = () => {
// 假设从表单控件中获取当前字段值
const currentQNum = 1; // 实际应从 input/state 读取
const currentTitle = "什么是 React?";
const currentAnswer = "一个用于构建用户界面的 JavaScript 库";
addResponse(currentQNum, currentTitle, currentAnswer);
};
return (
<div>
<button onclick="{handleNext}">保存并进入下一题</button>
<pre class="brush:php;toolbar:false;">{JSON.stringify(quizData, null, 2)}
