时间戳

首页 > 解决方案 > 页面刷新后反应表不重新填充

javascript - 页面刷新后反应表不重新填充

问题描述

在我的 React 页面上，我有一个 DataTable 组件，它的源是data我所在州的一个数组。在我的useEffect我调用一个动作来获取数据，通过它映射并为每一行定义一个对象，将它推送到一个新数组并setData对该新数组执行操作。

它在初始加载时工作正常，但如果我单击刷新，表格为空白并且代码不会再次运行

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])

编辑：

如果我从应用程序刷新页面，则导航到另一个页面并导航回该页面，它可以工作。仅当我单击 chrome 上的刷新按钮时才会出现此问题

标签： javascriptreactjs

解决方案

您contractors在依赖数组中缺少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])

我建议使用 eslint 来捕获此类错误。

推荐阅读