.filter() 不会使用 React 过滤自动完成数组
.filter() doesn't filter the array of Autocomplete using React
我读了很多书并针对这个问题实施了许多不同的可能解决方案,但 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() 来编译程序,但是在输入时,建议列表没有得到过滤。
任何想法将不胜感激!
你的代码的主要问题是你比较了 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={() => {}}/>
我读了很多书并针对这个问题实施了许多不同的可能解决方案,但 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() 来编译程序,但是在输入时,建议列表没有得到过滤。
任何想法将不胜感激!
你的代码的主要问题是你比较了 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={() => {}}/>