时间戳

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

javascript - 刷新后反应数据表不重新填充

问题描述

所以我正在获取一个对象数组来填充我的数据表，当我以我需要的格式获取我需要的数据时，获取没有问题。我像这样从我的 redux 商店中检索它：

const contractorList = useSelector(state => state.contractorList)
const { loading, error, contractors } = contractorList

在我useEffect的检查中，我检查用户是否登录，如果是，我调度我的操作来获取我的数据，通过它映射并将每个对象推送到我的data数组，这是一个如下状态：

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

最后，我在这里将 DataTable 的源设置为我的状态数组：

<DataTable
    noHeader
    pagination
    selectableRowsNoSelectAll
    columns={columns}
    className='react-dataTable'
    paginationPerPage={25}
    sortIcon={<ChevronDown size={10} />}
    paginationDefaultPage={currentPage + 1}
    data={data}
/>

问题如下，如果我最初访问该页面，表格中的数据加载正常，或者如果我从应用程序中的其他任何地方导航到该页面，它似乎工作得很好。但是，如果我手动刷新页面（因此单击浏览器上的刷新按钮），我的表格上会出现“无数据显示”。几乎就像我刷新时 useEffect 不会触发一样。有谁知道为什么？我迷路了，我看不出它是我的 redux 或 useEffect 的问题，因为它在应用程序中导航时有效。

这是使用效果：

useEffect(() => {
       if(userInfo ) {
            if(userInfo) {
                dispatch(listContractors())
            
                if(contractors) {
                    contractors.map(c => {
                        setData(data => [...data, {
                            action: <Link className='text-dark text-center' to={`/contractor/${c._id}`}><MoreHorizontal /></Link>,
                            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
                        }])
                    })
                }
            }
       } else {
           history.push('/login')
       }
    }, [dispatch, userInfo, history, successCreate])

如果我添加contractors到依赖项列表中，那么它会创建一个执行listContractors操作的无限循环

标签： javascriptreactjsuse-effect

解决方案

我会将您的 useEffect 分为两个，因为它们处理代码的不同部分，一个用于分派 fetch，另一个用于在收到数据时对数据进行处理。

// this will dispatch the listContractors action when the userInfo changes
useEffect(() => {
  if (userInfo) {
    dispatch(listContractors())
  } else {
    history.push('/login')
  }
}, [userInfo, history])

// this will update the data when contractors is changed
useEffect(() => {
  if (contractors) {
    const transformedContractors = contractors.map(contractor => ({
      ...contractor, // used this to avoid the one-by-one hand written copy.
      action: <Link className='text-dark text-center' to={`/contractor/${c._id}`}><MoreHorizontal /></Link>
    }));
    setData(transformedContractors);
  }
}, [contractors]);

推荐阅读