反应.js如果搜索下拉列表有任何元素，则条件呈现

Question

我是 React 的新手，并尝试使用下拉列表进行简单的搜索表单。当你在input中输入任何单词时，render()会根据道具name进行list。所以，我想用drop做一个条件渲染 - 如果list中没有任何内容，它将不渲染任何东西。我试图通过检查list长度来做到这一点，但它总是 5。 附言，如何使用includes()函数忽略input值的情况？

import React, { Component } from 'react';
import FoundedIngridient from './FoundedIngridient';
export default class FoundedIngridients extends Component {
ingridients = [
{
img: 'https://k-f.ru/wp-content/uploads/2015/11/karl-1.2.png',
name: 'Martini'
},
{
img: 'https://k-f.ru/wp-content/uploads/2015/11/karl-1.2.png',
name: 'Beer'
},
{
img: 'https://k-f.ru/wp-content/uploads/2015/11/karl-1.2.png',
name: 'Jim Beem'
},
{
img: 'https://k-f.ru/wp-content/uploads/2015/11/karl-1.2.png',
name: 'Jack Daniels'
},
{
img: 'https://k-f.ru/wp-content/uploads/2015/11/karl-1.2.png',
name: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi, molestiae tempora iste suscipit incidunt aliquid?'
},
]
state = {
searchVal: '',
isDropShown: false
}
handleChange = (e) => {
this.setState({
searchVal: e.target.value,
isDropShown: e.target.value == '' ? false : true
});
}
render() {
const list = this.ingridients.map((ingridient, key) => {
return (
ingridient.name.includes(this.state.searchVal.toString()) &&
<FoundedIngridient
key={`drop-${key}`}
img={ingridient.img}
name={ingridient.name}
>
</FoundedIngridient>
)
});
return (
<div className="form">
<form action="#">
<div className="input-wraper">
<input
type="text"
placeholder="For example, beer.."
value={this.state.searchVal}
onChange={this.handleChange}
/>
</div>
{
(
this.state.isDropShown &&
list.length
) &&
<div className="drop">
<div className="block">
{list}
</div>
</div>
}
</form>
</div>
);
}
}

Answer 1

我创建了一个如何使用过滤器实现列表的示例。请参阅代码沙盒。

在你的例子中，React 不跟踪列表实例，因此你有 5 个结果。您需要将此数组移动到存储区并在渲染函数中使用它。