javascript - react - ¿Qué significa "componentes de función sin estado no se pueden dar refs" significa?

redux-thunk

Question

Tengo esto:

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)

y me sale:

Advertencia: no se pueden dar referencias a los componentes de la función sin estado (consulte la referencia "especificada" en ProjectsSummaryLayout creado por Connect (ProjectsSummaryLayout)). Los intentos de acceder a esta referencia fallarán.

¿Qué es lo que está tratando de decirme? ¿Estoy realmente haciendo algo mal?

Veo una discusión sobre esto here pero desafortunadamente simplemente no entiendo la conclusión.

Answer 1

En React, las refs no se pueden adjuntar a un componente sin estado .

React Redux 3 adjunta una ref al componente que le das, independientemente de si es apátrida o no. La advertencia que ve proviene de React porque internamente, React Redux 3 adjunta una ref al componente sin estado que proporcionó ( ProjectsSummaryLayout ).

No estás haciendo nada malo y, de acuerdo con este comentario de GitHub , puedes ignorar la advertencia de forma segura.

En React Redux 4 , no se adjunta ref al componente envuelto de manera predeterminada, lo que significa que si actualiza a React Redux 4, la advertencia debería desaparecer.

Answer 2

React tiene 2 estilos de componentes de uso común.

• Componente funcional
• Componente de clase

Entonces, cuando estaba haciendo uso de Functional One, me encontré con este error.

Fragmento de código correspondiente al componente funcional

Pero tan pronto como lo cambié a Class Component, funcionó.

Fragmento de código correspondiente al componente de clase.

Intente cambiar el componente funcional al componente de clase. Espero que se resuelva tu problema.