.filter() 不会使用 React 过滤自动完成数组

Question

我读了很多书并针对这个问题实施了许多不同的可能解决方案，但 none 对我有用。发生的事情是 .filter() 没有过滤我的自动完成的建议数组。我得到的错误是 .filter() 不是我通过添加 .toString() 解决的函数，但我相信我不需要使用此方法，因为我已经看到其他示例非常类似于我的工作没有应用 .toString()

过滤器：

const AutoComplete = (props) => {
    // console.log("suggestions:", props.suggestions);
    // console.log("search:", props.search);
    return (
        <div className="autocomplete_list">
            {props.suggestions
                .filter(name => props.search === '' ||
name.toString().includes(props.search.toLowerCase()))
                // .filter(({ name }) => name.indexOf(props.search.toLowerCase()) > -1)
                .map((value) => {
                    console.log('Value:', value.name);
                    return (
                        <div
                            className="autocomplete_item"
                            onClick={() => props.updateSeach(value.name)}
                            key={value.name}
                            tabIndex="0"
                        >
                            <span>{value.name}</span>
                        </div>
                    );
                })}
            </div>
    )}

我传递的数据：

export const InputOptions = [
    {
        "name": 'Jonathan',
        "country": 'Mexico',
    },
    {
        "name": 'Aldo Ova',
        "country": 'Mexico',
    },
    {
        "name": 'Susana',
        "country": 'Mexico',
    },
    {
        "name": 'Diabetes',
        "country": 'Mexico',
    },
    {
        "name": 'Diablo 2',
        "country": 'Mexico',
    },
    {
        "name": 'Comunist',
        "country": 'Mexico',
    },
]

正如您在上面看到的，我尝试了 .indexOf 和 .includes，在这两种情况下，我都必须应用 .toString() 来编译程序，但是在输入时，建议列表没有得到过滤。

任何想法将不胜感激！

Answer 1

你的代码的主要问题是你比较了 2 个字符串，但只有一个被转换为小写，其他错误是没有破坏你的道具，这是推荐的良好做法，最后一个在你的过滤器方法中你直接比较名称，但请记住在 map、filter、find 等类型的方法中，您在第一个参数中收到一个入口对象，您也需要对其进行解构。

看看这是你的代码，但有一些变化：

export const AutoComplete = ({ search, suggestions, updateSeach }) => {
  return (
    <div className='autocomplete_list'>
      {suggestions
        .filter(({ name }) => search === '' || name.toLowerCase().includes(search.toLowerCase()))
        .map(value => (
          <div className='autocomplete_item' onClick={() => updateSeach(value.name)} key={value.name} tabIndex='0'>
            <span>{value.name}</span>
          </div>
        ))}
    </div>
  );
};

它对我有用，这是它的调用方式的示例。只改函数updateSeach

<AutoComplete search={search} suggestions={suggestions} updateSeach={() => {}}/>

.filter() 不会使用 React 过滤自动完成数组

.filter() doesn't filter the array of Autocomplete using React

javascript

reactjs

filter

autocomplete