"Uncaught Error: Invalid hook call." 在轨道上做出反应

Question

我在RubyonRails项目中使用react，发现错误Uncaught Error: Invalid hook call.我正在使用gemreact-on-rails。我的组件代码：

const DimaSearch = () => {
const [searchObject, setSearchObject] = useState("")

useEffect(() => {
fetch(
`/api/v1/search_objects?search=${searchObject}`
)
.then((response) => response.json())
.then((data) => {
console.log(data);
});
}, [searchObject]);
const handleOnChange = (event) => {
event.preventDefault()
setSearchObject(event.target.value)
}
return (
<div className="container justify-content-center">
<div className="row">
<div className="col-md-8">
<div className="input-group mb-3">
<input 
type="text" 
className="form-control input-text"
placeholder="Search..."
onChange={(event) => handleOnChange(event)}
/>
<div className="input-group-append">
<button className="btn btn-outline-primary btn-lg" type="button">
<i className="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
</div>
)
}
export default DimaSearch

index.html.slim，其中我导入组件：

= react_component("DimaSearch")

我已经读过钩子的用法，真的不知道该怎么办。

Answer 1

对我来说，解决方案是在类组件中呈现功能组件，然后在视图中呈现最后一个。在视图上呈现功能组件时，react on rails似乎有错误。