React中如何在axios的patch请求内动态添加ID参数？

数据老陈

2026-10-14

问题原因

你收到id未定义的报错，核心原因是postData函数的作用域内没有可访问的id变量，和你用function还是const定义函数无关。

解决方法

方案1：将ID作为参数传入函数

改写postData，接收id作为入参：

// 函数定义，入参接收动态ID
const postData = (id) => {
  // 注意需确保作用域内可正常访问API_KEY、change两个变量
  axios.patch(`classrooms/${id}?api_key=${API_KEY}`, `subject=${change}`)
    .then((res) => console.log(res.data))
    .catch((err) => console.log(err));
}

绑定点击事件时传入对应ID即可，不同场景写法如下：

React/Vue 模板绑定：

// 替换为你的实际业务中对应的动态ID变量
<button onClick={() => postData(item.id)}>提交修改</button>

原生JS绑定：
先给点击元素加自定义属性存储ID：

<button class="edit-btn" data-id="123">修改ID为123的条目</button>

再绑定事件获取ID调用函数：

document.querySelectorAll('.edit-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const targetId = btn.dataset.id;
    postData(targetId);
  })
})

方案2：函数内部实时获取ID

如果ID存储在页面输入框、全局变量等位置，可以直接在函数内部读取：

function postData(){
  // 示例：从ID输入框读取值，可根据你的实际业务场景修改获取逻辑
  const id = document.querySelector('#classroom-id-input').value;
  axios.patch(`classrooms/${id}?api_key=${API_KEY}`, `subject=${change}`)
    .then((res) => console.log(res.data))
    .catch((err) => console.log(err));
}