“未捕获错误:挂钩调用无效。”Rails上的React

Question

我在我的Ruby on Rails项目上使用react，但我在使用gem react-on-rails时发现了错误Uncaught Error: Invalid hook call.。我的组件代码：

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在渲染视图上的功能组件时有错误。