无法在类组件 React.js 中使用 useState

IT技术 reactjs
2021-04-14 13:24:13

我正在尝试在 react 中创建常量，如下所示：

const [firstFocus, setFirstFocus] = React.useState(false);
const [lastFocus, setLastFocus] = React.useState(false);

代码中使用的常量如下：

import React, { Component } from 'react'
import axios from 'axios'

import {
    Button,
    Card,
    CardHeader,
    CardBody,
    CardFooter,
    Form,
    Input,
    InputGroupAddon,
    InputGroupText,
    InputGroup,
    Container,
    Col
} from "reactstrap";

class PostForm extends Component {
    constructor(props) {
        super(props)

        this.state = {
            email: '',
            password: ''
        }
    }

    changeHandler = (e) => {
        this.setState({ [e.target.name]: e.target.value })
    }

    submitHandler = (e) => {
        e.preventDefault()
        console.log(this.state)
        axios.post('https://jsonplaceholder.typicode.com/posts', this.state)
            .then(response => {
                console.log(response)
            })
            .catch(error => {
                console.log(error)
            })
    }


    render() {
        const { email, password } = this.state
        **const [firstFocus, setFirstFocus] = React.useState(false);
        const [lastFocus, setLastFocus] = React.useState(false);**
        return (

            <div>
                <Col className="ml-auto mr-auto" md="4">
                    <Card className="card-login card-plain">
                        <Form onSubmit={this.submitHandler} className="form">
                            <CardHeader className="text-center">
                            </CardHeader>
                            <CardBody>
                                <InputGroup
                                    className={
                                        "no-border input-lg"
                                    }
                                >
                                    <InputGroupAddon addonType="prepend">
                                        <InputGroupText>
                                            <i className="now-ui-icons ui-1_email-85"></i>
                                        </InputGroupText>
                                    </InputGroupAddon>
                                    <Input
                                        placeholder="Email"
                                        type="text"
                                        name="email"
                                        value={email}
                                        onChange={this.changeHandler}
                                    // onFocus={() => setFirstFocus(true)}
                                    // onBlur={() => setFirstFocus(false)}
                                    ></Input>
                                </InputGroup>
                                <InputGroup
                                    className={
                                        "no-border input-lg"
                                    }
                                >
                                    <InputGroupAddon addonType="prepend">
                                        <InputGroupText>
                                            <i className="now-ui-icons ui-1_lock-circle-open"></i>
                                        </InputGroupText>
                                    </InputGroupAddon>
                                    <Input
                                        placeholder="Password"
                                        type="password"
                                        name="password"
                                        value={password}
                                        onChange={this.changeHandler}
                                    // onFocus={() => setLastFocus(true)}
                                    // onBlur={() => setLastFocus(false)}
                                    ></Input>
                                </InputGroup>
                            </CardBody>
                            <CardFooter className="text-center">
                                <Button
                                    block
                                    className="btn-round"
                                    color="info"
                                    type="submit"
                                    size="lg"
                                >
                                    Get Started
                    </Button>
                                <div className="pull-right">
                                    <h6>
                                        <a
                                            className="link"
                                            href="#pablo"
                                            onClick={e => e.preventDefault()}
                                        >
                                            Need Help?
                        </a>
                                    </h6>
                                </div>
                            </CardFooter>
                        </Form>
                    </Card>
                </Col>
            </div>
        )
    }
}

export default PostForm

但是，当我尝试执行此操作时，出现以下错误：

无效的钩子调用。钩子只能在函数组件的主体内部调用。

我在那里为电子邮件和密码创建了另一个常量，它工作得很好，所以我不确定为什么我的 useState 常量不起作用。非常感谢任何帮助或指导，因为我对react很陌生。谢谢！

6个回答

在 React 中，我们有两种构建组件的方法：类和函数。

文件

Hooks 是 React 16.8 中的新增功能。它们让您无需编写类即可使用状态和其他 React 功能。

使用状态钩子：

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

等效类示例：

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

正式地，您不能在类组件上使用钩子。但是如果你想在类组件上使用 useState 当然有一些技巧

例如，你不能这样做

class Example extends React.Component {

  _renderCounter = () => {
    //
    // YOU CAN'T DO THIS
    // REACT WONT ALLOW YOU
    //
    const [count, setCount] = useState(0);
    return <div>{ count }</div>
  }

  render() {
    return(
      <div>{ this._renderCounter() }</div>
    );
  }
}

但是，通过小技巧，您可以做到这一点。React 会让你

class Example extends React.Component {

  _renderCounter = () => () => {
    const [count, setCount] = useState(0);

    return <div>{ count }</div>
  }

  render() {
    const MyInlineHook = this._renderCounter();

    return(
      <div><MyInlineHook /></div>
    );
  }
}

有了这一招，你可以访问this和props类组件。:)

但是，您如何以这种方式访问​​ setCount 方法？
2021-06-09 13:24:13

您正在尝试在类组件中使用 useState，它是一个 React 钩子。这行不通。Hooks 只能用在功能组件中。

您需要在构造函数中创建一个名为 this.state 的状态对象。然后您可以通过调用 this.setState 在方法中更改它。在这里解释会很长，但您可以查看这里的文档reactjs.org/docs/state-and-lifecycle.html或 google 初始化类组件中的状态
2021-05-30 13:24:13
您知道类组件的等效实现/方法是什么吗？
2021-06-06 13:24:13

钩子只能用在功能组件中，你使用的是类组件。

有关更多信息以及如何实施它，请查看这篇文章链接

另一种方法是在功能组件中使用钩子，然后在类组件中导入该功能组件。

export default class LikeButton extends Component {
  render() {
    return <Like />;
  }
}

function Like() {
  const [like, setLike] = useState(100);
  const [liked, toggleLike] = useState(false);
  const handleLike = () => {
    if (liked == false) {
      setLike(like + 1);
      toggleLike(true);
    } else {
      setLike(like - 1);
      toggleLike(false);
    }
  };
  return (
    <>
      <div>
        <h2>Like Button</h2>
        <button
          onClick={() => handleLike()}
          className={`like-button ${liked == true ? "liked" : ""}`}
        >
          Like | <span className="likes-counter">{like}</span>
        </button>
      </div>
    </>
  );
}
其它你可能感兴趣的问题
上一篇删除项目会导致 React 删除最后一个 DOM 节点，而不是与该项目关联的节点 下一篇导入 React 与 React，{ 组件}