在這種情況下，我有關於無效 useState 鈎子的錯誤？

Question

我有一個這樣的組件。 我還在該組件中使用了 useState 掛鈎，並在版本 17.0.2 中使用了我的 react 項目。 但是在控制台開發工具中明顯“未捕獲的錯誤：無效的掛鈎調用。掛鈎只能在 function 的主體內部調用”。你能幫幫我嗎？

import { useState } from 'react'
 
 
function AddProduct () {

  const [product , setProduct] = useState(1)
  const handleChange = (e) => {
    setProduct(e.target.value)
  }
   return (
       <div>
       <input value={product} onChange={handleChange}/>
       <button>Save</button>
       </div>
   )
}
export default AddProduct

Answer 1

打擊的原因之一可能是問題：

1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM）
2. 您可能違反了 Hooks 規則
3. 你可能在同一個應用程序中擁有多個 React 副本

我認為這可能是第一個原因，您沒有提到您正在使用的“react-dom”版本。 作為下面的示例，代碼應該可以工作，因為它具有兼容的 react 和 react-dom 版本，並且它們都支持 function 組件和掛鈎：

"dependencies": {
    "react": "17.0.1",
    "react-dom": "17.0.1"
  },

應用程序.js

import * as React from "react";
import { useState } from "react";
import { render } from "react-dom";

function App () {

  const [product , setProduct] = useState(100)
  const handleChange = (e) => {
    setProduct(e.target.value)
  }
   return (
       <div>
       <input value={product} onChange={handleChange}/>
       <button>Save</button>
       </div>
   )
}
export default App;

render(<App />, document.getElementById("root"));