如何使用useState()从多标签表单中获取对象数组？

问题出在你更新数组状态的方式上——直接使用当前的quizData变量可能因为React状态更新的异步性，拿到的是旧的数组引用，导致新数据覆盖旧数据。正确的做法是使用函数式更新来确保每次都基于最新的状态进行修改。

正确的代码实现： #

const [quizData, setQuizData] = useState([]);

const handleAddQuestion = () => {
  // 使用函数式更新，prevQuizData是最新的数组状态
  setQuizData(prevQuizData => {
    const newQuestion = {
      questionNumber: prevQuizData.length + 1,
      questionTitle: `question ${prevQuizData.length + 1}`,
      answer: `answer ${prevQuizData.length + 1}`
    };
    // 返回新数组，保留旧数据并追加新对象
    return [...prevQuizData, newQuestion];
  });
};

为什么这样有效？ #

React的useState更新函数支持传入一个回调，这个回调会接收最新的前一次状态值（也就是prevQuizData）。无论状态更新是否异步，这个值都是准确的，这样你就能安全地基于最新数组追加新的问题对象，不会丢失之前的数据。

另外，检查组件中是否有其他地方意外重置了quizData（比如在渲染逻辑中重新调用setQuizData([])），如果有的话也要移除这些错误逻辑。

内容的提问来源于stack exchange，提问作者Himanshu Sardana