Question

我在我的 Ruby on Rails 项目上使用 react 并且我发现了错误 Uncaught Error: Invalid hook call. 我正在使用 gem react-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 有在视图上渲染功能组件的错误。

“未捕获的错误：无效的挂钩调用。”在 Rails 上做出反应

1 个答案: