Erro no reactcsstransitiongroup | React parte 2: Container components e o ciclo de vida do react

Solucionado (ver solução)

Solucionado
(ver solução)

4
respostas

por Caio Cesar da Silva Lourenço

| 177.2k xp | 69 posts

Eu segui passo a passo do vídeo mas me ocorreu o seguinte erro

Uncaught Invariant Violation: Element ref was specified as a string (.$3) but no owner was set. This could happen for one of the following reasons:
1. You may be adding a ref to a function component
2. You may be adding a ref to a component that was not created inside a component's render method
3. You have multiple copies of React loaded
See https://fb.me/react-refs-must-have-owner for more information.
    at invariant (http://localhost:3000/static/js/1.chunk.js:44587:19)
    at coerceRef (http://localhost:3000/static/js/1.chunk.js:56803:29)
    at createChild (http://localhost:3000/static/js/1.chunk.js:57022:32)
    at reconcileChildrenArray (http://localhost:3000/static/js/1.chunk.js:57289:29)
    at reconcileChildFibers (http://localhost:3000/static/js/1.chunk.js:57639:18)
    at reconcileChildren (http://localhost:3000/static/js/1.chunk.js:59498:32)
    at updateHostComponent (http://localhost:3000/static/js/1.chunk.js:59975:7)
    at beginWork (http://localhost:3000/static/js/1.chunk.js:60799:18)
    at performUnitOfWork (http://localhost:3000/static/js/1.chunk.js:64809:16)
    at workLoop (http://localhost:3000/static/js/1.chunk.js:64850:28)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/1.chunk.js:44677:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/1.chunk.js:44726:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/1.chunk.js:44780:35)
    at replayUnitOfWork (http://localhost:3000/static/js/1.chunk.js:64033:9)
    at renderRoot (http://localhost:3000/static/js/1.chunk.js:64963:17)
    at performWorkOnRoot (http://localhost:3000/static/js/1.chunk.js:65887:11)
    at performWork (http://localhost:3000/static/js/1.chunk.js:65797:11)
    at performSyncWork (http://localhost:3000/static/js/1.chunk.js:65771:7)
    at requestWork (http://localhost:3000/static/js/1.chunk.js:65626:9)
    at scheduleWork (http://localhost:3000/static/js/1.chunk.js:65439:9)
    at Object.enqueueSetState (http://localhost:3000/static/js/1.chunk.js:56125:9)
    at Timeline.push../node_modules/react/cjs/react.development.js.Component.setState (http://localhost:3000/static/js/1.chunk.js:72892:20)
    at http://localhost:3000/static/js/main.chunk.js:830:75

index.js:1375 The above error occurred in the <span> component:
    in span
    in ReactTransitionGroup
    in ReactCSSTransitionGroup (at Timeline.js:52)
    in div (at Timeline.js:51)
    in Timeline (at App.js:17)
    in div (at App.js:15)
    in div (at App.js:14)
    in App (created by RouterContext)
    in RouterContext (created by Router)
    in Router (at src/index.js:26)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

4 respostas

por Caio Cesar da Silva Lourenço

| 177.2k xp | 69 posts

23/06/2019

Mas para ficar completo o meu código segue em baixo.

import React from 'react';
import FotoItem from './FotoItem';
import Pubsub from 'pubsub-js';
import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup';

export default class Timeline extends React.Component {

    constructor(props){
        super(props);
        this.state={fotos:[]};
        this.login = this.props.login;
    }

    componentWillMount(){
     Pubsub.subscribe('timeline',(topico, fotos)=>{
        this.setState({fotos});

     });             
    }

    carregaFotos(){
         let urlPerfil;

        if(this.login === undefined){
            urlPerfil =`https://instalura-api.herokuapp.com/api/fotos?X-AUTH-TOKEN=${localStorage.getItem('auth-token')}`
        }else{
          urlPerfil =`https://instalura-api.herokuapp.com/api/public/fotos/${this.login}`;  
        }

      fetch(urlPerfil)
        .then(response => response.json())
        .then(fotos => this.setState({...this.state, fotos: fotos.status ? [] : fotos })); 
        //.then(fotos => this.setState({fotos:fotos}));
        //.then(fotos => this.setState({...this.state, fotos: fotos.status ? [] : fotos }));  
    }

    componentDidMount(){
       this.carregaFotos();
    }

    componentWillReceiveProps(nextProps){
       if(nextProps !==undefined){
           this.login = nextProps.login;
           this.carregaFotos();

       } 
    }

    render(){
        return (
        <div className="fotos container">
          <ReactCSSTransitionGroup 
            transitionName="timeline"
            transitionEnterTimeout={500}
            transitionLeaveTimeout={300}>
                {
                   this.state.fotos.map(foto => <FotoItem key={foto.id} fotos={foto}/>)
                }
           </ReactCSSTransitionGroup> 

        </div>

        );
    }
}

por Matheus Henrique Castiglioni

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

24/06/2019

Fala aí Caio, tudo bem? Consegue postar o código do FotoItem? Parece que o erro está acontecendo ao tentar setar uma referência.

Você está usando o ref no FotoItem`?

Fico no aguardo.

solução!

por Caio Cesar da Silva Lourenço

| 177.2k xp | 69 posts

01/07/2019

eu importei o

import { CSSTransitionGroup } from 'react-transition-group'

 <CSSTransitionGroup 
            transitionName="timeline"
            transitionEnterTimeout={500}
            transitionLeaveTimeout={300}>
                {
                   this.props.fotos.map(foto => <FotoItem key={foto.id} fotos={foto} like={this.props.like} comenta={this.props.comenta}/>)
                }
           </CSSTransitionGroup>

por Matheus Henrique Castiglioni

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

02/07/2019

Boa Caio, fico feliz que tenha dado certo.

Sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.