Question

如何修复“item[key].toLowerCase 不是一个函数”

2019-04-08

5339

javascript reactjs

我想在我的仪表板中添加一个搜索字段，并且我已经获取了 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 ，因此 id 的 item[key] 是数字，因此它会抛出错误。首先检查 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(....)