React前端向Django后端传递csvData数组为空的问题求助

你遇到的核心问题是URL编码不规范导致的参数解析失败，另外GET请求本身也不适合传递这种包含换行、特殊字符的复杂数据，下面给你两种可行的解决方案：

方案1：对csvData进行URL编码（快速修复） #

你的csvData是包含换行、逗号的多行字符串，直接拼到GET请求的URL里时，这些特殊字符会破坏URL的结构，Django后端无法正确识别这个参数，所以拿到空值。我们可以用encodeURIComponent()把csvData转成URL安全的格式：

修改BatchFlights组件里的fetchData方法：

fetchData = () => {
  // 对csvData进行URL编码
  const encodedCsvData = encodeURIComponent(this.state.csvData);
  const url = `http://localhost:8000/predict?temperature=${this.state.temperature}&visibility=${this.state.visibility}&windIntensity=${this.state.windIntensity}&csvData=${encodedCsvData}`;
  
  fetch(url, {
    method: "GET",
    headers: {
      "Content-Type": "application/json; charset=utf-8",
    }
  })
  .then((resp) => resp.json())
  .then((data) => {
    this.updateDelay(data.prediction)
  })
  .catch((error) => {
    console.log(error, "catch the hoop")
  });
};

Django后端不需要额外解码，request.GET.get('csvData')就能直接拿到正确的字符串。

方案2：改用POST请求（更推荐） #

GET请求的长度有限制，而且不适合传递这种大的、格式复杂的数据，POST请求把数据放在请求体里会更稳妥：

前端修改fetchData方法： #

fetchData = () => {
  const url = "http://localhost:8000/predict";
  fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json; charset=utf-8",
      // 如果Django开启了CSRF保护，需要在这里带上CSRF token，比如：
      // "X-CSRFToken": getCookie("csrftoken")
    },
    body: JSON.stringify({
      temperature: this.state.temperature,
      visibility: this.state.visibility,
      windIntensity: this.state.windIntensity,
      csvData: this.state.csvData
    })
  })
  .then((resp) => resp.json())
  .then((data) => {
    this.updateDelay(data.prediction)
  })
  .catch((error) => {
    console.log(error, "catch the hoop")
  });
};

Django后端修改视图函数： #

import json
from django.http import JsonResponse

def predict(request):
    if request.method == 'POST':
        # 解析请求体里的JSON数据
        request_data = json.loads(request.body)
        csvData = request_data.get('csvData')
        print("CSV DATA", csvData)
        
        # 处理你的业务逻辑，返回结果
        return JsonResponse({"prediction": 你的预测结果})

额外需要注意的小问题 #

1. 你的handleChange方法里有个语法错误：console.log("csvData", csvData)里的csvData未定义，应该改成this.state.csvData。
2. 确保调用fetchData时，csvData已经被正确更新到state里：因为setState是异步操作，如果在调用setCsvData后立刻触发fetchData，可能state还没完成更新，这时候传递的还是旧值。可以在setCsvData的回调里触发请求，或者确保用户点击提交时state已经更新完成。

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