Я получил ошибку при использовании React.useRef внутри компонента функции реакции

Question

Я использую React.useRef внутри функционального компонента реакции, я получаю сообщение об ошибке до того, как использовал его внутри компонента класса, и теперь я заменил его на функциональный компонент реакции, и я все еще получаю это сообщение об ошибке ниже.

React Hook "React.useRef" вызывается в функции "landingPage", которая не является ни компонентом функции React, ни пользовательской функцией React Hook.

Не могли бы вы объяснить, почему я все еще получаю это сообщение после помещения в функциональный компонент. Вот мой код

import React from "react";
import Modal from "./Modal";

function landingPage() {
  const modalRef = React.useRef();

  return (
    <div className="landingPage">
      <div className="container">
        <div className="landingPage__row">
          <div className="playvideo-wrapper">
            <div className="playvideo-text">See us in action</div>
            <div className="playvideo-button" onClick={openModal}>
              <p>Play Video</p>
            </div>
            <Modal ref={modalRef}>
              <iframe
                src="https://www.youtube.com/embed/SQ8CvT25_Dg?autoplay=1"
                frameborder="0"
                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen
              ></iframe>
            </Modal>
          </div>
        </div>
      </div>
    </div>
  );
}

export default landingPage;

и вот мой код в app.js

import React, { Component } from "react";
import LandingPage from "./LandingPage";

export default class App extends Component {
  render() {
    return (
      <div className="main">
        <LandingPage />
      </div>
    );
  }
}

Answer 1

Компоненты React ДОЛЖНЫ начинаться с заглавной буквы. Измените это:

function landingPage() {...

к этому:

function LandingPage() {...

Answer 2

У меня была та же проблема, всегда помните, что каждый компонент React ДОЛЖЕН начинаться с заглавной буквы,

Переименуйте свой

function landingPage(){...}кfunction LandingPage(){...}.

Причина этого заключается в том, что изменения состояния выполняются в классах, поэтому они будут ссылаться на ваши функции как на классы, а для классов первая буква класса должна быть заглавной.