javascript - 如何修复 "item[key].toLowerCase is not a function"

Question

我想在我的仪表板中添加一个搜索字段，我在这个 api 中获得了 api 数组，在数组中我有对象，所以我如何才能做到这一点，以 react 我应该在其上应用什么逻辑。

这是我应用的逻辑，但它返回错误

这是错误:

item[key].toLowerCase is not a function

这是我应用的逻辑:

handleChange = event => {
    const lowercasedFilter = this.state.SearchResult.toLowerCase();
    this.state.data.bank_accounts.filter(item => {
    return Object.keys(item).some(key =>
      item[key].toLowerCase().includes(lowercasedFilter)
    );
  });
    this.setState({ SearchResult: event.target.value });
  };

Answer 1

正如你展示的你的单品看起来像

{bank_accounts : [ { id: 1 , item_name: 'bankOne'} , {id: 2 , item_name:'bankTwo'} ] }

这里有两个键 id 和 item_name 所以 item[key] 对于 id 是数字，对于这会引发错误。首先检查 typeof 的值，然后使用 .toLowerCase

handleChange = event => {
    const lowercasedFilter = this.state.SearchResult.toLowerCase();
    this.state.data.bank_accounts.filter(item => {
    return Object.keys(item).some(key =>
      typeof item[key] === "string" && item[key].toLowerCase().includes(lowercasedFilter)
    );
  });
    this.setState({ SearchResult: event.target.value });
  };

注意:filter() 不会改变原始数组。您需要将结果存储在另一个变量中。喜欢

const result  = this.state.data.bank_accounts.filter(....)