useState 反應鈎子

Question

我正在嘗試學習 React 鈎子。 但我不能讓第一個工作。 在這一點上它是一個如此基本的應用程序，但如果我不能讓 useState 工作，我就無法繼續前進。

import React, { useState } from "react-dom"
import './App.css';

function App(props) {
  const [click, setClick] = useState(0);

  const handleChange = e => { 
    console.log(e.target.value)
  }

  const handleClick = e => { 
    console.log(e.target)
  }

  return (
    <div className="App">
      Value<input type="text" onChange={ handleChange }/>
      <select>
        <option>F to C degrees</option>
        <option>C to F degrees</option>
      </select>
      <button onClick={handleClick}>Go</button>
    </div>
  );
}

export default App;

那是我的應用程序，只是為了讓您知道我所有的反應都是相同的版本

  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-scripts": "4.0.1",
    "react-test-renderer": "17.0.1",
    "web-vitals": "^0.2.4"
  },

我得到的錯誤是：

TypeError: Object is not a function or its return value is not iterable
App
src/App.js:5
  2 | import './App.css';
  3 | 
  4 | function App(props) {
> 5 |   const [click, setClick] = useState(0);
  6 | 
  7 |   const handleChange = e => { 
  8 |     console.log(e.target.value)

Answer 1

import React, { useState } from "react"

這是正確的導入語句

Answer 2

我認為react-dom沒有useState ，因此將文件的頂部更改為：

import React, { useState } from "react"
import './App.css';

function App(props) {
  const [click, setClick] = useState(0);

  const handleChange = e => { 
    console.log(e.target.value)
  }

  const handleClick = e => { 
    console.log(e.target)
  }

  return (
    <div className="App">
      Value<input type="text" onChange={ handleChange }/>
      <select>
        <option>F to C degrees</option>
        <option>C to F degrees</option>
      </select>
      <button onClick={handleClick}>Go</button>
    </div>
  );
}

export default App;

Answer 3

import React from "react"

const App = (props)=>{
const [click, setClick] = useState(0);

const handleChange = e => { 
console.log(e.target.value)

 }

 const handleClick = e => { 
 console.log(e.target)
  
}

return (
<div className="App">
  Value<input type="text" onChange={ handleChange }/>
  <select>
    <option>F to C degrees</option>
    <option>C to F degrees</option>
  </select>
  <button onClick={handleClick}>Go</button>
</div>
  );
  } 

 export default App;