React组件中Filter函数返回空数组问题：使用state值过滤失效但props值可行的排查

嘿，我来帮你拆解这个问题！你遇到的核心问题是数据类型不匹配加上setState的异步特性在搞鬼，咱们一步步理清楚：

1. 最关键的原因：类型不匹配导致严格相等失败 #

你的enq.registrationId应该是数字类型（因为用parseInt处理props参数后就能匹配成功），但：

• 你初始化state时，直接把this.props.match.params.reg_status存进registrationId——而URL参数match.params的所有值都是字符串类型
• 你用严格相等运算符===比较数字和字符串，自然匹配不上，所以filter返回空数组

而当你用parseInt(this.props.match.params)时，把字符串转成了数字，类型一致后就能正常匹配了。

2. 次要问题：setState的异步特性导致state更新不及时 #

在componentDidUpdate里，你调用setState后立刻依赖这个state的值，但setState是异步操作——此时this.state.registrationId还没更新成新值，后续的过滤逻辑自然拿不到正确的参数。

3. 额外优化点：不要在render里执行逻辑操作 #

render方法会在组件每次渲染时触发，你在这里调用checkEnquiries会导致不必要的重复执行，甚至可能在state还没更新完成时就执行过滤，拿到旧数据。

具体修复步骤 #

步骤1：统一数据类型，转换为数字 #

初始化和更新state时，都把参数转成数字（记得指定十进制，避免八进制解析问题）：

state = {
  progress: true,
  enquiries: [],
  // 初始时就转成数字
  registrationId: parseInt(this.props.match.params.reg_status, 10)
}

componentDidUpdate = (prevProps) => {
  if(prevProps.match.params.reg_status !== this.props.match.params.reg_status) {
    const newRegId = parseInt(this.props.match.params.reg_status, 10);
    this.setState({registrationId: newRegId}, () => {
      // 在setState的回调里执行依赖新state的逻辑（比如过滤）
      this.checkEnquiries();
    });
    console.log("I ran")
  }
}

步骤2：调整checkEnquiries的调用时机 #

把checkEnquiries从render里移到合适的生命周期或setState回调中，或者直接在渲染时计算过滤后的数组：

render() {
  // 直接在渲染时计算过滤结果，避免重复调用
  const filteredEnquiries = this.state.enquiries.filter(enq => enq.registrationId === this.state.registrationId);
  console.log(filteredEnquiries); // 调试用，正式环境可移除
  
  return(
    {/* 用filteredEnquiries渲染你的UI */}
  )
}

步骤3：可选优化：数据加载时机 #

如果后续需求中，URL参数变化时需要重新从后端获取数据，可在componentDidUpdate中调用loadData：

componentDidUpdate = (prevProps) => {
  if(prevProps.match.params.reg_status !== this.props.match.params.reg_status) {
    const newRegId = parseInt(this.props.match.params.reg_status, 10);
    this.setState({registrationId: newRegId}, () => {
      this.loadData(); // 参数变化时重新加载数据
    });
  }
}

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