web-dev-qa-db-fra.com

Que signifie "Les composants de fonction sans état ne peuvent pas recevoir de références"?

J'ai ceci:

const ProjectsSummaryLayout = ({projects}) => {
   return (
      <div className="projects-summary col-md-10">
          <h3>Projects</h3>
          <ul>
              { projects.map(p => <li key={p.id}>{p.contract.client}</li>) }
          </ul>
      </div>
   )
}

const ProjectsSummary = connect(
   state => ({projects: state.projects})
)(ProjectsSummaryLayout)

et je reçois:

Avertissement: Les références de fonction ne peuvent pas être attribuées aux composants de fonction sans état (voir la référence "wrappedInstance" dans ProjectsSummaryLayout créée par Connect (ProjectsSummaryLayout)). Les tentatives d'accès à cette référence échoueront.

Qu'est-ce qu'il essaie de me dire? Est-ce que je fais réellement quelque chose de mal?

Je vois la discussion à ce sujet ici mais malheureusement, je ne comprends tout simplement pas la conclusion.

javascriptreactjsreduxreact-redux
40
GreenAsJade

Dans React, refs ne peut pas être attaché à un composant sans état .

Réagissez Redux 3 attache un ref au composant que vous lui donnez indépendamment de de savoir si c'est apatride. L’avertissement que vous voyez provient de React car en interne, React Redux 3 attache un ref au composant sans état que vous avez fourni (ProjectsSummaryLayout).

Vous ne faites rien de mal et selon ce commentaire de GitHub , vous pouvez ignorer l'avertissement en toute sécurité.

Dans React Redux 4 , aucun ref n'est attaché au composant encapsulé par défaut, ce qui signifie si vous effectuez une mise à niveau vers React Redux 4, l'avertissement devrait disparaître.

27
Alex Booker

React a 2 styles de composants couramment utilisés.

  • Composante fonctionnelle
  • Composant de classe

Ainsi, lorsque je me servais de Functional, je rencontrais cette erreur. error encountered when I was using functional component

Extrait de code correspondant au composant fonctionnel

code for square component

Mais dès que je l'ai changé en composant de classe, cela a fonctionné.

it worked

Extrait de code correspondant au composant de classe.

enter image description here

Essayez de changer le composant fonctionnel en composant de classe. J'espère que cela résoudra votre problème.

4
Divyanshu Rawat