Says you are having memory leak - Warning: Can’t perform a React state update on an unmounted Component

Asked

Viewed 39 times

0

This message appears to me, someone could help me solve?

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    at Agent (http://localhost:3000/static/js/main.chunk.js:7612:93)
    at div
    at div
    at div
    at Layout (http://localhost:3000/static/js/main.chunk.js:6455:5)
    at C (http://localhost:3000/static/js/0.chunk.js:423017:37)
    at ConnectFunction (http://localhost:3000/static/js/0.chunk.js:419702:75)
    at Route (http://localhost:3000/static/js/0.chunk.js:422760:29)
    at AppRoute (http://localhost:3000/static/js/main.chunk.js:181753:14)

This is my code:

import React, { useState, useEffect } from "react";
// import SettingMenu from "../Shared/SettingMenu";
import { Row, Col} from "reactstrap";
import { Link } from "react-router-dom";
import { MDBDataTable } from "mdbreact";
import firebase from 'firebase'


export default function Property(props){


  
  const [sessionUid, setSessionUid] = useState()
  const [listProperties, setListProperties] = useState()
  const [loading, setLoading] = useState(true)

  useEffect(() =>{
  
    


    const db = firebase.firestore();

    firebase.auth().onAuthStateChanged(async function(user) {
      setSessionUid(user.uid)
    })
    
    db.collection('property').where('realstate_id','==', `${sessionUid}`).get().then(querySnapshot => {
      const rows = querySnapshot.docs.map(function (doc){
        doc.data()
        
        return Object.assign({
          addBtn: <span><Link to={'/property/edit/'+doc.id}><button style={{marginRight: '10px'}} className="btn btn-primary" ><i className="far fa-edit"></i></button></Link><Link to={'/property/view/'+doc.id}><button className="btn btn-primary" ><i className="far fa-eye"></i></button></Link></span>
          
        
        }, doc.data())
      })
  
      const data = {
         columns: [
          {
            label: "Code",
            field: "code",
            sort: "asc",
            width: 270
          },
          {
            label: "Name",
            field: "name",
            sort: "asc",
            width: 150
          },
          // {
          //   label: "Link",
          //   field: "url",
          //   sort: "asc",
          //   width: 200
          // },
          
          
          {
            label: "Ação",
            field: "addBtn",
            sort: "asc",
            width: 120
          }
        ],  rows
        
      
    }
    setListProperties(data)
    
    setLoading(false)

    })
      
    

   
  },[listProperties, sessionUid])
  if(loading){
    return(   <div className="spinner-grow text-primary m-1" role="status">
    <span className="sr-only">Loading...</span>
</div>) } else {
    return (
      <React.Fragment>
        <div className="container-fluid">
          <Row className="align-items-center">
            <Col sm={6}>
              <div className="page-title-box">
                <h4 className="font-size-18">Propriedades</h4>
                <ol className="breadcrumb mb-0">
                  <li className="breadcrumb-item">
                    <Link to="/dashboard">Painel</Link>
                  </li>
                  <li className="breadcrumb-item">
                    <Link to="/property">Ímovel</Link>
                  </li>
                  <li className="breadcrumb-item active">Ver</li>
                </ol>
              </div>
            </Col>

            {/* <Col sm="6">
              <div className="float-right d-none d-md-block">
                <SettingMenu />
              </div>
            </Col> */}
          </Row>

          <div className="row">
            <div className="col-12">
              <div className="card">
                <div className="card-body">
                  <h4 className="card-title">Lista</h4>
                  <p className="card-title-desc">
                    lista de propriedades cadastradas
                  </p>

                  <MDBDataTable responsive striped bordered data={listProperties} />
                </div>
              </div>
            </div>
          </div>
        </div>
      </React.Fragment>

  )
    }

}

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.