Reputation: 430
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
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