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 iterableAppsrc/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;