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

【问题标题】："Uncaught Error: Invalid hook call." React on Rails“未捕获的错误：无效的挂钩调用。”在 Rails 上反应
【发布时间】：2021-07-15 10:49:30
【问题描述】：

我在我的 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")

我已经阅读了有关钩子用法的信息，但实际上我不知道该怎么做。

【问题讨论】：

您确定这是引发错误的组件吗？我看不出有什么问题。你读过reactjs.org/warnings/invalid-hook-call-warning.html 吗？
是的，我做到了。我的解决方案是在类组件中呈现功能性组件，然后在视图中呈现最后一个。似乎 react-on-rails 在视图上渲染功能组件时存在错误。

标签： ruby-on-rails reactjs ruby react-on-rails

【解决方案1】：

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

【讨论】：