Je suis nouveau sur React et j'essaie d'intégrer des crochets React dans certains des projets utilisés par le cours React que je suis. Cet exemple est censé ajouter un champ de saisie qui définit la couleur de fond d'une page. Lorsque je charge la page, après 1 seconde, j'obtiens l'erreur suivante

    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.

Quel pourrait être le problème ici? Je n'ai pas réussi à le comprendre.

Je vous remercie!

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;
0
Radu Cristian Voin 30 oct. 2020 à 18:29

1 réponse

Meilleure réponse

Les fonctions préfixées par use sont interprétées par React comme des hooks. Mais ici, votre useBackgroundColor n'est pas réellement un crochet, c'est juste une fonction de réglage d'état. Renommez-le en quelque chose de plus approprié - la convention habituelle est de préfixer la variable d'état avec set. Changer

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

À

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

Puis référence setBackgroundColor dans votre code.

2
CertainPerformance 30 oct. 2020 à 15:30