Блог

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

     srcApp.js
  Line 16:43:  React Hook "useBackgroundColor" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function  react-hooks/rules-of-hooks

Search for the keywords to learn more about each error.
  

В чем может быть проблема? Мне не удалось это выяснить.

Спасибо!

 import logo from "./logo.svg";
import "./App.css";
import UserItem from "./UserItem";
import React, { useState } from "react";

function App() {
    const [backgroundColor, useBackgroundColor] = useState("purple");
    
    return (
        <div className="App" style={{ background: backgroundColor }}>
            <h1>Lista utilziatori:</h1>

            <input type="color" onChange={event => useBackgroundColor(event.target.value)} />
        </div>
    );
}

export default App;
  

Функции с префиксом use интерпретируются React как перехваты. Но здесь ваш useBackgroundColor на самом деле не перехват, это просто функция установки состояния. Переименуйте его во что-то более подходящее — обычным соглашением является префикс переменной состояния set . Изменить

 const [backgroundColor, useBackgroundColor] = useState("purple");
  

Для

 const [backgroundColor, setBackgroundColor] = useState("purple");
  

а затем ссылка setBackgroundColor в вашем коде.