Mettez à jour la page React dans le composant basé sur la classe sans utiliser useState.

Question

J'utilise le composant basé sur les classes de React pour afficher d'abord tous les jetons. Ensuite, je souhaite afficher deux textes avec spanid en même temps, quel que soit l'ordre, en utilisant les boutons précédent et suivant pour restituer la page. Il y aura n*(n-1) possibilités pour restituer la page. En effet, le premier texte avec un espagnol sera associé au deuxième texte avec un autre espagnol, jusqu'au n-1ème jeton avec un espagnol. Pour n morceaux de texte avec spanid, la page peut être restituée n*(n-1) fois à l'aide des boutons précédent/suivant. Puisque j'écris du code en utilisant les composants basés sur les classes de React, je ne sais pas comment gérer cela en utilisant useState et les accessoires comme je le ferais dans une configuration fonctionnelle. Toute aide sur ce problème est grandement appréciée.

importer React depuis 'react';
importer './App.css';

enregistrement const = [
  { "tid": 1, "token_text": "Canis Familiaris", "spanid": 1, "label": "Nom" },
  { "tid": 2, "token_text": "est" },
  { "tid": 3, "token_text": "le" },
  { "tid": 4, "token_text": "nom scientifique", "spanid": 2, "label": "type de nom" },
  { "tid": 5, "token_text": "de" },
  { "tid": 6, "token_text": "dog", "spanid": 3, "label": "species" },
  { "tid": 7, "token_text": "." }
];

La relation de classe étend React.Component {
const input_tokens = enregistrement ;
var cntr = 200 ;

   input_tokens.forEach(tk => {
       const span = tk['spanid'];
       if (!tk['spanid']) {
           tokens_to_render.push(
            <clé div= {`id${cntr}`} >
               <div id = {`label${cntr}`} className='no-label' key={tk.tid}>--</div>
               <div key={cntr} id = {`span${cntr}`} index={tk['spanid']} >
                   {tk['token_text']}
              </div>
            </div>
          );
          
       } autre {
          tokens_to_render.push(
            <clé div = {`id${cntr}`} >
              <div id = {`label${cntr}`} className='label' key={tk.tid} >{tk['label']}</div>
              <div
                key={cntr} identifiant = {`span${cntr}`}
                index={tk['spanid']}
              >
                  {tk['token_text']}
              </div>
            </div>
          );
       } ;
       centre = centre + 1 ;
  });
retour (
        <div key="externe" >
          <div key="id" className="control-box">
             {tokens_to_render}
             
      </div>

    </div>
  )
}
  }
exporter la relation par défaut ;

Answer 1

Traduction : les hooks comme useState ne peuvent être utilisés que dans les composants de fonction. Pour utiliser l'état dans un composant de classe :

• Renvoie le JSX à afficher à partir de la méthode render().
• Attribuez l'état initial à l'attribut state.
• Appelez this.setState pour mettre à jour le statut.

Par exemple :

class Example extends React.Component {
    state = {
        count: 0
    }
    
    render() {
        return <div>
            <button onClick={() => this.setState({count: this.state.count + 1})}>
                Increment count
            </button>
            <p>Clicked {this.state.count} times</p>
        </div>;
    }
}