Почему `Invalid hook call` Error Показывает, когда я реализовал useState inn реакции

Question

Я пытаюсь реализовать useState В ответ, и я получаю ошибку Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: Вот мой код, в котором я пытаюсь реализовать. Помогите мне, как решить эту проблему

import React, { useState, useEffect, Component } from "react";
import ReactDOM from "react-dom";
class Demo extends Component {
  render() {
    const [fromDate, setFromDate] = useState("");

    const [toDate, setToDate] = useState("");

    const assignFromDate = e => {
      console.log(e.target.value);
      setFromDate(e.target.value);
    };
    return (
      <div className="App">
        <div className="col-sm-4">
          <div className="form-group">
            <span style={{ opacity: "0.6", fontSize: "13px" }}>from</span>
            <input
              type="date"
              name="from"
              id="startdate"
              value={fromDate}
              onChange={assignFromDate}
              className="form-control datepicker"
              style={{ width: "150px" }}
            />
          </div>
        </div>
        <div className="col-sm-4">
          <div className="form-group">
            <span style={{ opacity: "0.6", fontSize: "13px" }}>to</span>
            <input
              type="date"
              name="to"
              min={fromDate}
              id="enddate"
              value={toDate}
              placeholder="Select Date"
              onChange={e => setToDate(e.target.value)}
              className="form-control datepicker"
              style={{ width: "150px" }}
            />
          </div>
        </div>
      </div>
    );
  }
}
export default Demo;

Answer 1

Вы должны использовать компонент functional вместо компонента class.

Вот рабочая демонстрация для вас: https://stackblitz.com/edit/react-ekfzud

import React, { useState, useEffect, Component } from "react";
import ReactDOM from "react-dom";

function Demo(){

    const [fromDate, setFromDate] = useState("");

    const [toDate, setToDate] = useState("");

    const assignFromDate = e => {
      console.log(e.target.value);
      setFromDate(e.target.value);
    };

    return (
      <div className="App">
        <div className="col-sm-4">
          <div className="form-group">
            <span style={{ opacity: "0.6", fontSize: "13px" }}>from</span>
            <input
              type="date"
              name="from"
              id="startdate"
              value={fromDate}
              onChange={assignFromDate}
              className="form-control datepicker"
              style={{ width: "150px" }}
            />
          </div>
        </div>
        <div className="col-sm-4">
          <div className="form-group">
            <span style={{ opacity: "0.6", fontSize: "13px" }}>to</span>
            <input
              type="date"
              name="to"
              min={fromDate}
              id="enddate"
              value={toDate}
              placeholder="Select Date"
              onChange={e => setToDate(e.target.value)}
              className="form-control datepicker"
              style={{ width: "150px" }}
            />
          </div>
        </div>
      </div>
    );
}
export default Demo;

Answer 2

useState будет работать только внутри функциональных компонентов. Так что лучше переместить входные данные в презентационный компонент и использовать fromDate, toDate там.

const Input = (props) => {
    return
    (<input
    type="date"
    name="to"
    min={fromDate}
    id="enddate"
    value={toDate}
    placeholder="Select Date"
    onChange={e => this.props.setToDate(e.target.value)}
    className="form-control datepicker"
    style={{ width: "150px" }} />);
}

<Input setToDate ={this.setToDate.bind(this)}/>