如何使用Axios按顺序获取数组中的全部对象数据？

你的问题源于前端代码仅处理了返回数组的第一个元素，要实现从第一个到最后一个对象依次获取并处理所有数据，只需修改前端的getList函数，遍历完整的数据集并更新状态即可。

前端代码修改 #

原代码仅提取了数组的第一个元素data[0]，并只将单个对象存入状态。修改后通过遍历整个数组，处理所有数据：

const getList = async () => {
  axios.defaults.withCredentials = true;
  const config = {
    headers: {
      withCredentials: true,
    },
  };
  try {
    const response = await axios.get("url", config);
    const data = response.data;
    console.log(data);
    // 遍历所有返回数据，转换为所需格式
    const processedData = data.map(item => ({
      id: item.BOARD_ID,
      title: item.BOARD_TITLE,
      register: item.REGISTER_ID,
      date: moment(item.REGISTER_DATE).format("YYYY MM DD, H:mm:ss a")
    }));
    // 将所有处理后的数据存入状态
    setBbsData(processedData);
  } catch (error) {
    console.log(error);
  }
};

说明 #

• 使用Array.map()遍历返回的完整数据集，对每个对象进行格式转换，生成包含所有处理后数据的新数组
• 直接将完整数组传入setBbsData，确保状态中包含从第一条到最后一条的所有数据

可选：确保数据库返回顺序 #

如果需要严格控制数据的返回顺序，可以在后端SQL查询中添加排序规则，比如按ID或注册时间升序排列：

app.get("url", (req, res) => {
  // 按BOARD_ID升序排列，保证数据顺序稳定
  const sqlQuery = "SELECT * FROM BOARD ORDER BY BOARD_ID ASC;";
  db.query(sqlQuery, (err, result) => {
    res.send(result);
  });
});

内容的提问来源于stack exchange，提问作者한대현