React.js：如何在保存后强制反应表再次呈现？ （钩子）

Posted 2023-02-22

【中文标题】React.js：如何在保存后强制反应表再次呈现？ （钩子）

【英文标题】：React.js: How do I force a react table to render again after saving? (hooks)

【发布时间】：2020-07-19 13:20:19

【问题描述】：

我有一个使用这个库react-bootstrap-table-next的反应表

我通过使用此代码保存在数据库中更新了它的内容：

/* API for saving profile - version if normalized tables */
  const saveProfile = () => 
    const mapProfileName = selectedModules.map((profileName)=>(profileName:profileName))
    const mapSelectedModules = selectedModules.map((id)=>(id:id))
    const mapSelectedActions = selectedActions.map((id)=>(id:id))
    ProfileMaintenanceService.saveProfile(profileName, mapSelectedModules, mapSelectedActions)
    .then((response) => 
      console.log("ProfileMaintenancePage - saveProfile response.data >>> " , response.data)
      console.log("ProfileMaintenancePage - saveProfile JSON.stringify(response.data) >>> ", JSON.stringify(response.data))
      if(response.data.success === "Success")
        setShowSuccessModal(true);
        setShowFailedModal(false);
      
    ).catch((err) => 
      console.log("ProfileMaintenancePage - saveProfile catch err.response.data>>> ", err.response.data.error)
        setProfileSaveFailedModalMessage(err.response.data.error)
        setShowSuccessModal(false);
        setShowFailedModal(true);
    )
  ;

我已成功保存。但是，该表并未立即反映更改。

我应该使用 useEffect 吗？在这种情况下，我如何调用 useEffect 。很抱歉，React 一开始真的很混乱。

TIA

【问题讨论】：

这能回答你的问题吗？ React - How can I force render a function component?

【参考方案1】：

你可以再次调用get table request：

const saveProfile = () => 
    const mapProfileName = selectedModules.map((profileName)=>(profileName:profileName))
    const mapSelectedModules = selectedModules.map((id)=>(id:id))
    const mapSelectedActions = selectedActions.map((id)=>(id:id))
    ProfileMaintenanceService.saveProfile(profileName, mapSelectedModules, mapSelectedActions)
    .then((response) => 
      console.log("ProfileMaintenancePage - saveProfile response.data >>> " , response.data)
      console.log("ProfileMaintenancePage - saveProfile JSON.stringify(response.data) >>> ", JSON.stringify(response.data))
      if(response.data.success === "Success")
        setShowSuccessModal(true);
        setShowFailedModal(false);
      
     // like this use ur own function
    return ProfileMaintenanceService.getProfiles()
    ).then((response) => 
    // there should get data from response and set to table
   ).catch((err) => 
      console.log("ProfileMaintenancePage - saveProfile catch err.response.data>>> ", err.response.data.error)
        setProfileSaveFailedModalMessage(err.response.data.error)
        setShowSuccessModal(false);
        setShowFailedModal(true);
    )
  ;

【讨论】：

太棒了！这现在完美无缺。只需要再次请求并设置为餐桌。谢谢