web-dev-qa-db-fra.com

Violation invariante: les crochets ne peuvent être appelés qu'à l'intérieur du corps d'un composant de fonction

TL; DR: J'essaie d'utiliser le nouveau react-hooks api, mais je reçois toujours une erreur de violation invariante lors de l'appel du hook setState, mais il continue d'échouer.

import React, { useState } from 'react';

// type State = {
//   heading: string;
// }

const Text = () => {
  const initialState = 'Heading'.toUpperCase();

  const [heading, setHeading] = useState(initialState);

  return (
    <header>
      <h1>
        {setHeading('Brussels')};
        {heading}
      </h1>
    </header>
  );
};

export default Text;
javascriptreactjsreact-hooks
5
intercoder

L'appel de setHeading ("Brussel") provoquera un nouveau rendu qui se traduira à son tour par une boucle infinie, pour éviter que vous ayez besoin d'un événement pour changer l'en-tête de "Heading" en "Brussels". Le code ci-dessous pourrait vous aider

const Text = () => {
const initialState= 'Heading'.toUpperCase();
const [heading, setHeading] = useState(initialState);  
return (
 <header>
    <h1>
    {heading}
    <button onClick= {() =>{setHeading("Brussel")}}>ChangeName</button>
    </h1>
    </header>
);
};
1
jShubh