无效钩子调用.当尝试搜索过滤器时，钩子只能在函数组件的内部调用

Question

错误提示在尝试使用useState进行搜索筛选时发生错误。我是一个初学者，最近开始使用react.js的代码如下:

这是我载入产品的地方

loadSearchData(){
getActiveProduct(null).then((response) => {
if(response.code == API_SUCCESS){
this.setState({
productList: response.data.product
})
}
})
}

这是我使用过滤器选项搜索数据的地方

getSearchData(){
const [searchTerm, setSearchTerm] = useState('')
const data = this.state.productList.filter((item)=>{
if(item.name.toLowerCase().includes(searchTerm.toLocaleLowerCase()))
return item
}).map((item, index) => {
return (
<li key={index}>
<a  onClick={(e) => this._navigateShop(route.product_details + "/" + item.id)}>{item.name}</a>
</li>
)
})
}

这是我想显示数据的地方

<div className="search-field collapse" id="searchToggle" >
<input className="search-input" placeholder="Search..." type="text" onChange={event =>   {setSearchTerm(event.target.value)}} />
<a type="button" data-toggle="collapse" data-target="#searchToggle" aria-controls="searchToggle" aria-expanded="false">
<i className="icon_close search-close"></i>
</a>
<div className="search-dropdown">
{this.getSearchData()}
</div>
</div> 

Answer 1

你正在使用一个类组件，那里没有钩子

如果您想添加另一个searchTerm状态，请在您的状态中添加另一个searchTerm。

---

如果使用功能组件

你不能在函数组件内的函数中声明钩子，把它移到函数的顶部

const [searchTerm, setSearchTerm] = useState('')  // <--- Move this to the top of your component!

As follow Rules Of Hooks