REACT-TYPESCRIPT - setState 中 useEffect() 内的 sessionStorage getItem() 返回 [] 但服务有数据

Question

我的屏幕有两个部分，例如

<custom-section-component>

和

<custom-main-component>

在

<custom-main-component>

中，我有引导选项卡，我在其中渲染 3 个组件，每个组件执行 CRUD 操作。

为了便于理解，

<custom-main-component>

选项卡-addRecordComponent | tab-updateRecordComponent | tab-deleteRecordComponent

对于每个成功的数据保存，我都会通过重用服务将数据存储在 sessionStorage 中，如下所示，

//浏览器StorageService.ts

export const saveToSession = (rollNumber: string, actionOnRecord: string) => {
  const existed = sessionStorage.getItem('actionOnRecord') || '[]';
  const data = JSON.parse(existed);
  data.push({ rollNumber, actionOnRecord });
  sessionStorage.setItem('actionOnRecord', JSON.stringify(data));
};

export const getFromSession = () => {
    const item = sessionStorage.getItem('actionOnRecord');
  
    if(item){
      const afterParsed = JSON.parse(item);
      console.log('gettingData', afterParsed); // am able to see coming [{},{},{},{}]
      return afterParsed;
    }
    return []
  };

我如何在我的组件中使用 saveToSession ？

//tab-updateRecordComponent.tsx

const onSaveBtnClick = () => {
    const rollNumber = '1234577',
    const actionOnRecord = 'New Data inserted into session Storage';

    saveToSession(rollNumber, actionOnRecord)
}

//tab-updateRecordComponent.tsx

const onUpdateBtnClick = () => {
    const rollNumber = '12345666',
    const actionOnRecord = 'Data UPDATED in session Storage';

    saveToSession(rollNumber, actionOnRecord)
}

//tab-deleteRecordComponent.tsx

const onDeletBtnClick = () => {
    const rollNumber = '12345666',
    const actionOnRecord = 'Data DELETED from session Storage';

    saveToSession(rollNumber, actionOnRecord)
}

到目前为止一切都很好。

现在我想在我的自定义部分组件中显示 sessionStorage 项目，我正在做的是，

const [savedData, setSavedData] = useState<any[]>([])

useEffect(() => {

    const itemsTodisplay = getFromSession();

    if(itemsTodisplay) {
        setSavedData(itemsTodisplay)
    }
},[])

return (
    <div>
    {
        savedData.map((d: any, index: any) => {
            <span> d.rollNumber</span>
            <span>d.actionOnRecord</span>
        })
    }
    </div>
)

问题，

在组件中得到 [] 数组，

正在获取预期数据。

期待，

一旦数据成功保存在 sessionStorage 中，我想在自定义部分组件中显示数据，而无需重新加载或刷新页面。

有人可以指导我如何处理这个问题吗？或者给我提供替代方法？

由于我的应用程序非常小，目前我没有计划实现像 redex mobex 等状态管理库。

REACT 新手请指导我

感谢您阅读这个问题。

Answer 1

您需要将

savedData

状态从部分组件提升到

custom-main-component

。因为Section组件不知道数据已更新，需要从Session存储中获取数据并更新状态。

您的按钮操作

onSave/Delete/Update

也应该位于主组件中，并且您应该将它们作为

onClick

属性提供给通用按钮组件

<button onClick={onSave}>Save</button>

。

onSave/Delete/Update

处理程序还应该更新

savedData

状态，然后将其传递给您的部分组件。

仅供参考，如果您在代码中提供一些沙箱，那么展示示例会更容易。