为什么在 React 中设置状态时会出现错误“无法在回调中调用钩子”？

Question

I am new to React, and I am trying to integrate React hooks in some of the projects that the React course I follow uses. This example is supposed to add an input field which sets the background color of a page. When I load the page, after 1 second, I get the following error

    src\App.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.

What might be the issue here? I haven't managed to figure it out.

Thank you!

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;

Answer 1

Functions prefixed with use are interpreted by React to be hooks. But here, your useBackgroundColor isn't actually a hook, it's just a state setter function. Rename it to something more appropriate - the usual convention is to prefix the state variable with set . Change

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

to

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

and then reference setBackgroundColor in your code.