BranOIE
BranOIE

Reputation: 430

React table not repopulating after page refresh

On my React page I have a DataTable component, the source of which is a data array in my state. In my useEffect I call an action to get the data, map through it and define an object for each row, push it to a new array and do setData to that new array.

It works fine on initial load, but if I click refresh the table is blank and the code doesn't run again

const [data, setData] = useState([])


useEffect(() => {
        dispatch(listContractors())
        const newData = new Array;

        contractors.map(c => {
            let obj = {
                action: `DELETE | EDIT`,
                psa_licence_no: c.psa_licence_no,
                company: c.company,
                trading_as: c.trading_as,
                address_1: c.address_1,
                address_2: c.address_2,
                address_3: c.address_3,
                county: c.county,
                eircode: c.eircode,
                contact_f_name: c.contact_f_name,
                contact_s_name: c.contact_s_name,
                office_tel_no: c.office_tel_no,
                mobile_tel_no: c.mobile_tel_no,
                sentinel_id: c.sentinel_id,
                email: c.email,
                intruder: c.intruder,
                cctv: c.cctv,
                guard_static: c.guard_static,
                arc_intruder: c.arc_intruder,
                arc_cctv: c.arc_cctv,
                issue_date: c.issue_date,
                expiry_date: c.expiry_date,
                psa_date_added: c.psa_date_added,
                psa_date_updated: c.psa_date_updated,
                psa_date_removed: c.psa_date_removed
            }
            newData.push(obj)
        })
        setData(newData)
    }, [dispatch])

EDIT:

If I refresh the page from the app, so navigate to a different page and navigate back to this one, it works. The problem only occurs if I click the refresh button on chrome

Upvotes: 0

Views: 632

Answers (1)

MisieQQQ
MisieQQQ

Reputation: 256

You are missing contractors in dependency array in useEffect

useEffect(() => {
        dispatch(listContractors())
        const newData = new Array;

        contractors.map(c => {
            let obj = {
                action: `DELETE | EDIT`,
                psa_licence_no: c.psa_licence_no,
                company: c.company,
                trading_as: c.trading_as,
                address_1: c.address_1,
                address_2: c.address_2,
                address_3: c.address_3,
                county: c.county,
                eircode: c.eircode,
                contact_f_name: c.contact_f_name,
                contact_s_name: c.contact_s_name,
                office_tel_no: c.office_tel_no,
                mobile_tel_no: c.mobile_tel_no,
                sentinel_id: c.sentinel_id,
                email: c.email,
                intruder: c.intruder,
                cctv: c.cctv,
                guard_static: c.guard_static,
                arc_intruder: c.arc_intruder,
                arc_cctv: c.arc_cctv,
                issue_date: c.issue_date,
                expiry_date: c.expiry_date,
                psa_date_added: c.psa_date_added,
                psa_date_updated: c.psa_date_updated,
                psa_date_removed: c.psa_date_removed
            }
            newData.push(obj)
        })
        setData(newData)
    }, [dispatch, contractors])

I recommend using eslint to catch this type of bugs.

Upvotes: 1

Related Questions