React中InputBox与ListBox筛选参数传递至控制器问题求助

核心问题汇总 #

• 1. 变量大小写与URL格式错误
     JS大小写敏感，RPTList函数参数为小写filter、status，但URL拼接时误用大写Filter、Status，会直接抛出变量未定义错误；同时查询参数分隔符错误使用$，缺少查询参数前缀?，路径多写了重复的/api/前缀，会导致接口请求404。
• 2. 类属性名不匹配
     AddNewApplication类定义的状态字段为applicationStatus，但handleChangeStatus中赋值的是status字段，字段名完全不对应，状态存储错误；构造函数初始化时存在拼写错误，AddNewApplicatio少写末尾的n。
• 3. State可变修改违规
     直接修改this.state.addApp原对象违反React不可变状态原则，会导致组件不触发预期的重渲染。
• 4. setState异步逻辑问题
     setState是异步方法，直接在调用后执行RPTList若后续依赖state取值会拿到旧值，建议放到setState回调中执行。
• 5. 事件handler的this指向问题
     类组件的普通方法默认不绑定this，若未在构造函数中手动bind，执行时this为undefined，调用this.setState会报错。
• 6. 下拉框value绑定错误
     ListBox组件绑定的value是this.state.addApp.applicationStatus，但实际赋值的是status字段，导致下拉框选中状态无法同步更新。

修复后的代码示例 #

Model修正 #

export class AddNewApplication {
    constructor() {
      this.search = undefined;
      this.applicationStatus = undefined; // 保持字段名统一
    }
}

构造函数修正 #

constructor(props) {
  super(props);
  this.state = {
    addApp: new AddNewApplication(), // 修正拼写错误
    rpt: [],
    loading: true,
    status: [] // 下拉框选项数据
  };
  // 绑定this，或者将方法改为箭头函数
  this.handleChangeSearch = this.handleChangeSearch.bind(this);
  this.handleChangeStatus = this.handleChangeStatus.bind(this);
}

方法修正 #

// 改为箭头函数也可以自动绑定this，不需要在构造函数bind
handleChangeSearch = (event) => {
  const searchVal = event.target.value;
  // 创建新的对象副本，不修改原state
  const newAddApp = {
    ...this.state.addApp,
    search: searchVal
  };
  this.setState({
    addApp: newAddApp 
  }, () => {
    // setState回调中执行请求，保证状态已更新
    this.RPTList(newAddApp.search, newAddApp.applicationStatus);
  });
}

handleChangeStatus = (event) => {
  const statusVal = event.target.value;
  const newAddApp = {
    ...this.state.addApp,
    applicationStatus: statusVal // 和类定义的字段名保持一致
  };
  this.setState({
    addApp: newAddApp
  }, () => {
    this.RPTList(newAddApp.search, newAddApp.applicationStatus);
  });
}

async RPTList(filter, status) {
  // 修正URL格式，参数大小写和分隔符
  const response = await fetch(`/api/Application?filter=${filter}&Status=${status}`);
  const data = await response.json();
  this.setState({ rpt: data, loading: false });
}

调用代码无需修改，保持原有逻辑即可 #

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