react useContext hatası

Anonim 1093 gün önce

355 defa görüntülendi

Tayfun hocanın 'React ile Kayan Menü' videosunu izleyip yapayım dedim fakat Menu.Divider içerisinde useContext kullanamıyorum hata alıyorum aldığım hata:

React Hook "useContext" is called in function "Menu.Divider" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"

Birebir aynı yazmama rağmen hata alıyorum.

import { useState, createContext, useContext} from "react";

const MenuContext = createContext();

const Menu = ({ children }) => {
  const [position, setPosition] = useState({});
  return (
    <MenuContext.Provider value={{ setPosition, position }}>
      <nav className="menu">
        {children}
        <Menu.Divider />
      </nav>
    </MenuContext.Provider>
  );
};

Menu.Divider = () => {
  const { position } = useContext(MenuContext);

  return (
    <div
      className="divider"
      style={{
        "--left": position.left + "px",
        "--top": position.top + "px",
        "--width": position.width + "px",
        "--height": position.height + "px",
      }}
    ></div>
  );
};


export default Menu

react

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (1)

h4ckdr0

1092 gün önce

Bu hatanın sebebi, Menu.Divider fonksiyonunun Menu sınıfının bir üyesi olarak tanımlanması.
Menu.Divider adı, Menu sınıfının bir alt sınıfı olarak görünüyor, ancak aslında bir fonksiyon.
Bu nedenle, React bu fonksiyonu bir custom Hook olarak algılamaz ve "useContext" Hook'unun yanlış bir yerde kullanıldığını bildirir.

Bir çözüm olarak, Menu.Divider fonksiyonunu Menu sınıfının bir alt sınıfı değil, tamamen ayrı bir fonksiyon olarak tanımlayabilirsiniz.
Örneğin:

const Divider = () => {
  const { position } = useContext(MenuContext);

  return (
    <div
      className="divider"
      style={{
        "--left": position.left + "px",
        "--top": position.top + "px",
        "--width": position.width + "px",
        "--height": position.height + "px",
      }}
    ></div>
  );
};

Bu şekilde, Divider fonksiyonu bağımsız bir fonksiyon olarak tanımlanmış olacak ve "useContext" Hook'unu kullanabilirsiniz.
Menu sınıfının içinde Divider fonksiyonunu çağırmak için aşağıdaki gibi bir kod kullanabilirsiniz:

const Menu = ({ children }) => {
  const [position, setPosition] = useState({});
  return (
    <MenuContext.Provider value={{ setPosition, position }}>
      <nav className="menu">
        {children}
        <Divider />
      </nav>
    </MenuContext.Provider>
  );
};

#011646