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&nbsp;React,&nbsp;{&nbsp;useState&nbsp;}&nbsp;from&nbsp;"react"这是正确的导入语句

Answer 2

我认为react-dom没有useState，所以将文件的顶部更改为：import React, { useState } from "react"import './App.css';function App(props) {&nbsp; const [click, setClick] = useState(0);&nbsp; const handleChange = e => {&nbsp;&nbsp; &nbsp; console.log(e.target.value)&nbsp; }&nbsp; const handleClick = e => {&nbsp;&nbsp; &nbsp; console.log(e.target)&nbsp; }&nbsp; return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; Value<input type="text" onChange={ handleChange }/>&nbsp; &nbsp; &nbsp; <select>&nbsp; &nbsp; &nbsp; &nbsp; <option>F to C degrees</option>&nbsp; &nbsp; &nbsp; &nbsp; <option>C to F degrees</option>&nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; <button onClick={handleClick}>Go</button>&nbsp; &nbsp; </div>&nbsp; );}export default App;

Answer 3

import React from "react"const App = (props)=>{const [click, setClick] = useState(0);const handleChange = e => {&nbsp;console.log(e.target.value)&nbsp;}&nbsp;const handleClick = e => {&nbsp;&nbsp;console.log(e.target)&nbsp;&nbsp;}return (<div className="App">&nbsp; Value<input type="text" onChange={ handleChange }/>&nbsp; <select>&nbsp; &nbsp; <option>F to C degrees</option>&nbsp; &nbsp; <option>C to F degrees</option>&nbsp; </select>&nbsp; <button onClick={handleClick}>Go</button></div>&nbsp; );&nbsp; }&nbsp;&nbsp;export default App;