在输入中搜索

Question

我在搜索时遇到问题。我有一个客户数组，我想按名称搜索。最初，一切正常，但当我使用退格键时，名称不会更新。不显示数组中的初始数据。

 const[searchCustomer, setSearchCustomer] = useState('')
 const changeSearchCustomer = (e) => {
  setSearchCustomer(e.target.value);
};
 const searchingCustomer = (e) =>{
  let costumers = [...customers];
  costumers = costumers.filter((el) =>
  
    el.firstName
      .toLowerCase()
      .includes(searchCustomer.toLowerCase())
  );

  setCustomers(costumers)

 }
<input type="text" placeholder="search..." value={searchCustomer} onChange={changeSearchCustomer} onKeyUp={searchingCustomer} />

不显示数组中的初始数据。

Answer 1

你为什么使用

onKeyUp

？将

searchingCustomers

中的所有逻辑放入

onChange

处理程序中。

另外，你还有一些问题

searchingCustomers

：

1. 假设您的状态值名为

   customers

   ，您不应在分配

   let customers = [... customers]

   时重复使用该名称

2. Array.filter() 已经返回浅拷贝，因此无需解构然后过滤结果。只需使用过滤器即可。

3. 使用

   let

   然后通过转换初始值重新分配它是不好的做法。使用

   const

   并首先为其分配转换后的值。

总而言之，这应该类似于

const newCustomers = customers.filter(...); setCustomers(newCustomers)

，尽管这是一个将回调传递给 setter 的完美用例，例如

setCustomers(prev => prev.filter(...))

，但毫无价值