React axios调用DRF后端PUT接口返回200但数据未更新如何解决

安全阿岳

2026-10-2

问题解决方案

1. 修正多处拼写错误

GET请求加载数据时，字段拼写错误：将setDisco(data.dicso)改为setDisco(data.disco)，否则初始加载就拿不到正确的disco值，提交时自然传错
FormData提交的字段拼写错误：将formField.append('injecttion_substation', injectionSubstation)改为formField.append('injection_substation', injectionSubstation)，多写了一个t导致后端接收不到该字段值

2. 修复下拉框赋值错误

当前下拉框的两个option value都绑定了原status值，无论选什么都不会修改status，修改为：

<select name="status" onChange={(e) => setStatus(e.target.value)}> 
  <option value="Yes">Yes</option>
  <option value="No">No</option>
</select>

3. 调整请求数据格式（可选但更推荐）

DRF默认开启的是JSON解析器，你当前用FormData传值需要确认后端视图是否配置了MultiPartParser解析器，否则后端拿不到参数。如果不需要上传文件，直接传JSON对象更简单，修改updateEkoMyto方法：

const updateEkoMyto = async () => {
  await axios({
    method: 'PUT',
    url: `http://127.0.0.1:8000/main/edit/${id}`,
    data: {
      disco,
      feeder_source_33kv: feederSource33kv,
      injection_substation: injectionSubstation,
      feeder_name: feederName,
      band,
      status
    }
  }).then(response => {
    console.log(response.data)
    // 提交成功后刷新前端数据
    loadEkoMyto()
    // 也可以跳转到列表页：history.push('/你的列表路由')
  })
}