Javascript ReactJS：如何在组件之间同步会话存储状态

在我的应用程序中，我有一个React组件，它呈现一个数字列表，并通过

sessionStorage

存储这些数字的总和

我的应用程序还有一个带有

的组件，可以添加新号码。这也会导致更新由

sessionStorage

存储的值。对于每个数字，都有一个

按钮

允许删除数字，这会立即更新存储在

会话存储中的值

问题是，我有另一个组件，它使用react钩子将存储在

sessionStorage

中的值用作状态，但是当我更新

sessionStorage

中的值时，状态的值不会改变

我正在尝试使用

useffect（）

对其进行更新，但不起作用：

import React from 'react';
import { useState, useEffect } from "react";


const LimitsIndicator = props => {
  const {
    limits: { total, used },
    currency,
    t,
    type,
  } = props;


  const [limitInUse, setInUse] = useState(sessionStorage.getItem('inUse'));

  useEffect(() => {
    setInUse(sessionStorage.getItem('inUse'))
  })

  return (
    <div>{limitInUse}</div>
  )

}

从“React”导入React；
从“react”导入{useState，useffect}；
const limitsinindicator=props=>{
常数{
限制：{总计，已使用}，
货币，
T
类型，
}=道具；
const[limitInUse，setInUse]=useState（sessionStorage.getItem（'inUse'）；
useffect（（）=>{
setInUse（sessionStorage.getItem（'inUse'））
})
返回(
{limitInUse}
)
}

在这幅图中，它显示了sum:250，以及两个值：100和150，但值150被取消，正如您在控制台中看到的，

sessionStorage

被更新，但sum的值没有改变

---

实现应用程序不同部分之间状态同步的一种方法是通过React

一般的想法是通过上下文提供者将共享状态（即

limitInUse

）集中在应用程序的根组件（或其附近），然后包装需要通过相应上下文使用者访问共享状态的子组件：

1。为共享状态创建上下文

创建一个上下文，给我们一个状态“提供者”和一个状态“消费者”。上下文使用者将用于访问整个应用程序中的共享状态并与之交互：

const IsUseContext = React.createContext();

2。为根组件中的共享状态定义状态访问

接下来，为共享

limitInUse

状态定义get/set逻辑。这应该在应用程序根级别（或接近根级别）的状态中定义。在这里，我在根组件

state

对象中定义：

this.state = {
  /* Define initial value for shared limitInUse state */
  limitInUse : sessionStorage.getItem('inUse'),

  /* Define setter method by which limitInUse state is updated */
  setLimitInUse: (inUse) => {

    /* Persist data to session storage, and update state to trigger re-render */      
    sessionStorage.setItem('inUse', `${ inUse }`)
    this.setState({ limitInUse })
  },
}

3。从根组件呈现上下文提供程序

现在，在应用程序的根级别呈现上下文的

提供者

组件，并通过提供者的

值

道具传递

状态

对象。

状态

对象现在可以从应用程序中使用的任何上下文消费者处访问（见下文）：

在子组件中显示共享状态

/*通过上下文使用者访问共享限制*/
返回(
{（{limitInUse}）=>（{limitInUse}）
)

---

有关完整的工作演示，请参阅。希望这有帮助

几周前，我遇到了一个类似的问题，并创建了一个NPM包来实现这一点：通过上下文API在组件之间共享状态，et自动将其保存在

localStorage

中。看一看，试一试：它叫

例如

1。首先在配置文件中定义共享持久化状态：

import repersist from 'repersist'

const { Provider, useStore } = repersist({
  storageKey: 'mystorekey',

  init: {
    counter: 0,
    search: ''
  },

  actions: {
    increment: () => ({ counter}) => ({
      counter: counter + 1
    }),
    typeSearch: search => ({ search })
  }
})

export { Provider, useStore }

import { Provider } from './storeConfig'

ReactDOM.render(
  <Provider>
    <App/>
  </Provider>,
  document.getElementById('root')
)

2。通过上下文注入状态：

import repersist from 'repersist'

const { Provider, useStore } = repersist({
  storageKey: 'mystorekey',

  init: {
    counter: 0,
    search: ''
  },

  actions: {
    increment: () => ({ counter}) => ({
      counter: counter + 1
    }),
    typeSearch: search => ({ search })
  }
})

export { Provider, useStore }

import { Provider } from './storeConfig'

ReactDOM.render(
  <Provider>
    <App/>
  </Provider>,
  document.getElementById('root')
)

---

每次页面刷新时，状态都会被

localStorage

重新水化。您如何更新

sessionStorage

？

useffect

将在每次渲染时在您的配置中进行渲染。我想发生的是，您的代码正确地完成了工作，但是由于它不知道

sessionStorage

已更改，

limitsinindicator

首先没有机会重新渲染（并且不更新其本地状态）。由于react没有意识到，

sessionStorage

中的任何更改都可能需要重新呈现组件，因此您需要帮助工具意识到这一点，并强制呈现。实际上，sessionStorage正在更新，当值更改时，我在控制台中进行了检查，但正如您所说，组件没有意识到此更新您知道我如何在sessionStorage中让组件意识到此更新吗？我添加了一个图像以更好地解释我所说的

import { Provider } from './storeConfig'

ReactDOM.render(
  <Provider>
    <App/>
  </Provider>,
  document.getElementById('root')
)

import { useStore } from './storeConfig'

const SearchField = () => {
  const [{ search }, { typeSearch }] = useStore()
  return (
    <input value={search} onChange={e => typeSearch(e.target.value)}/>
  )
}