React传递props实现搜索栏过滤表格功能时报错如何解决

问题根因 #

你在App组件中调用EnhancedTable表格组件时，仅传递了onChange={setSearchTerm}，没有将存储搜索输入值的searchTerm状态作为props传递给表格，导致在table.js中读取props.searchTerm时为undefined，触发相关报错。

修复步骤 #

1. 修正父组件props传递 #

打开app.js，找到调用EnhancedTable的代码段，修改传参逻辑：

// 原错误写法
<EnhancedTable
  onChange={setSearchTerm}
/>

// 替换为正确写法
<EnhancedTable
  searchTerm={searchTerm}
/>

表格组件不需要修改父组件的搜索状态，仅需接收搜索值做过滤，因此直接传递searchTerm状态即可。

2. 修正表格组件过滤逻辑 #

打开table.js，放开注释的filter过滤代码，修改为以下规范写法（同时规避undefined调用方法的报错）：

.filter((item) => {
  // 搜索值为空时直接返回所有数据
  if (!props.searchTerm) return true
  // 大小写不敏感匹配客户名称
  return item.clientName.toLowerCase().includes(props.searchTerm.trim().toLowerCase())
})

（可选优化）实现清空功能 #

如果需要点击Clear按钮清空搜索内容、恢复全量数据展示，给app.js中的Clear按钮添加点击事件：

<Button 
  style={{ backgroundColor: 'white', color: 'black', width: '100px', height: '40px' }} 
  variant="contained"
  onClick={() => setSearchTerm("")}
>
  Clear
</Button>

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