表单数据进入方法后变成null

前端不是很会
我用一个搜索框来搜索订单

img


然后向后端发送post请求来查询数据库

img

目前的问题是，如果查询到的结果是在数据库中存在，那么页面将会正常显示
但是如果查询结果不存在，那么页面就会报错

img

同时，浏览器控制台第一次输出num是有值的，进入到axios的方法后就变成了undefined
并且在这次报错之后，在搜索框每添加或删除1个字符，都会在控制台报一次错
后端可以正常收到form表单里的数据

img

问题可能是由于前端代码问题引起的：
变量未定义：检查是否在正确的作用域内定义了变量。

异步代码：如果前端代码中存在异步代码，那么可能需要使用async/await或回调函数来等待异步代码完成。

前后端数据传输：确保在前端正确发送表单数据，并在后端正确接收和处理数据。

空字符串：检查是否在搜索框中输入了空字符串，如果是，请在前端代码中对其进行特殊处理。

类型错误：检查前端代码中是否存在类型错误，例如将字符串解析为数字等。推荐检查并调试前端代码，并在找到错误后对其进行修复。

在你的代码中，使用了一个v-model来绑定表单中的输入，但是没有明确的定义num和selectState的值。

因此，在使用axios发送请求之前，请确保num和selectState有定义的值。

例如，可以在data对象中定义num和selectState：

data: function () {
  return {
    num: '',
    selectState: ''
  }
}

这将确保num和selectState始终有值，并且请求不会出现undefined的情况。

searchOrder: function (pageNum) {
let form = new FormData();
if (orderApp.num === "" && orderApp.selectState === "") {
location.href = "/allorder.html";
} else if (orderApp.num === "") {
location.href = "/allorder.html";
} else {
console.log("有搜索值");
form.append("num", this.num);
form.append("selectState", this.selectState);
console.log(this.num);
console.log(this.selectState);axios({
  url: '_search',
  method: 'post',
  data: form
}).then(function (r) {
  console.log(this.num);
  console.log(this.selectState);
  orderApp.orders = r.data.list;
  orderApp.pageinfo = r.data;
});}
}

看到报错信息，你的代码似乎存在一个错误，在render函数中使用了null的属性（即读取'num'）。

应该对你的数据进行检查，以确保它在使用前是有效的。如果你的数据不存在，请确保在渲染之前初始化它。

编写一个查询订单信息的功能，在查询结果不存在时，会出现一些报错。

从控制台的输出来看，在搜索框每添加或删除1个字符，就会在控制台报一次错。错误的具体信息是 "TypeError: Cannot read properties of null (reading 'num')"，可能是因为读取了不存在的对象的属性造成的。

后端可以正常收到form表单里的数据，但是在查询数据库时可能出现了一些问题，导致查询结果是null，再读取这个结果的属性就会报错。

如果想解决这个问题，你可以在代码中加入一些判断，在查询结果为null时，显示相应的提示信息。例如：

if(result == null){
  console.log("查询结果不存在");
}else{
  console.log("查询结果存在");
  // 对结果进行处理
}

this对象在请求结果里（then方法里）已经变了，页面的渲染依赖于返回的后端数据，获取到的数据为空，渲染就出现问题
建议调试then方法里，应该能够很快就发现问题