使用useState时扩展运算符仅插入对象最后一项问题排查

你在apiData.map循环里反复调用setData，每次更新时都把questions直接替换成单个processData(e)的结果，而非将新题目追加到数组中。再加上React的setState是异步操作，循环里多次调用会导致状态被覆盖，最终只保留最后一次的赋值结果。另外你的代码同时混用了await和.then()，写法冗余，建议统一风格。

先一次性处理完所有API返回的数据，生成完整的题目数组后，再调用一次setData更新状态：

const [data, setData] = useState({
  questions: [],
});

useEffect(() => {
  const fetchData = async () => {
    try {
      const res = await axios.get(baseURL);
      const apiData = res.data.results;
      // 批量处理所有数据，生成完整题目数组
      const processedQuestions = apiData.map(e => processData(e));
      // 一次性更新状态
      setData(prevData => ({
        ...prevData,
        questions: processedQuestions
      }));
    } catch (err) {
      // 可添加错误处理逻辑
      console.error('获取题目失败:', err);
    }
  };
  fetchData();
}, []);

如果processData是异步函数，需要用Promise.all等待所有处理完成：

const [data, setData] = useState({
  questions: [],
});

useEffect(() => {
  const fetchData = async () => {
    try {
      const res = await axios.get(baseURL);
      const apiData = res.data.results;
      // 异步处理所有数据，等待全部完成
      const processedQuestions = await Promise.all(apiData.map(e => processData(e)));
      setData(prevData => ({
        ...prevData,
        questions: processedQuestions
      }));
    } catch (err) {
      console.error('获取题目失败:', err);
    }
  };
  fetchData();
}, []);

• 避免在循环中频繁调用setState，一次性处理完数据再更新，既能避免状态覆盖，也能提升组件性能。
• 异步操作统一使用async/await搭配try/catch，代码可读性更高，也便于错误捕获。

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