如何在点击按钮时让Axios请求URL的ID参数自增1？

要实现每次点击按钮递增ID请求用户数据，只需用React的useState维护当前ID的状态，每次请求后更新ID即可，修改后的代码如下：

import { useState } from 'react';
import axios from 'axios';

const Button = () => {
  // 初始化用户ID为1，对应首次请求的ID
  const [userId, setUserId] = useState(1);

  const handleUser = () => {
    // 用当前ID拼接请求地址
    axios.get(`.../user/${userId}/`).then((res) => {
      // 处理返回的用户数据，比如存到状态或渲染
      console.log(res.data);
      // 请求成功后，将ID加1
      setUserId(prevId => prevId + 1);
    }).catch((err) => {
      // 可选：处理请求失败的情况，比如提示错误
      console.error('请求用户数据失败:', err);
    });
  };

  return <button onClick={handleUser}>NEXT</button>;
};

export default Button;

关键说明 #

• 状态维护：用useState创建userId状态，初始值设为1，保证首次请求地址是.../user/1/。
• 动态地址拼接：用ES6模板字符串`.../user/${userId}/`动态插入当前ID，避免硬编码。
• 状态更新：请求成功后用setUserId(prevId => prevId + 1)更新ID，函数式更新能确保拿到最新的状态值，避免异步更新导致的问题。

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