javascript - ReactJS:如何在组件之间同步sessionStorage状态

Question

在我的应用程序中，我有一个 React 组件，它呈现数字列表，并且还通过 sessionStorage 存储这些数字的总和。 。

我的应用程序还有一个带有 <input /> 的组件以便可以添加新号码。这也会导致 sessionStorage 存储的值要被更新。对于每个数字，button存在以允许删除数字，这会立即更新存储在 sessionStorage 中的值.

问题是我有另一个组件使用 sessionStorage 中存储的值作为使用 react 钩子(Hook)的状态，但是当我更新 sessionStorage 中的值时state 的值不会改变。

我正在尝试使用 useEffect() 进行更新，但它不起作用:

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

}

在此图中，它显示了总和:250，以及两个值:100 和 150，但值 150 被取消，正如您在控制台中看到的那样，sessionStorage更新了，但是sum的值没有改变。

Answer 1

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

总体思路是通过上下文提供程序将共享状态(即 limitInUse)集中在应用程序的根组件处(或附近)，然后包装需要访问共享状态的子组件通过相应的上下文消费者:

<强>1。创建共享状态的上下文

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

const IsUseContext = React.createContext();

<强>2。在根组件中定义共享状态的状态访问

接下来，为共享 limitInUse 状态定义获取/设置逻辑。这应该在应用程序根级别(或附近)的状态中定义。在这里，我在根组件 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。从根组件渲染上下文提供者

现在，在应用的根级别渲染上下文的 Provider 组件，并通过提供程序的 value 属性传递 state 对象。现在可以从应用程序中使用的任何上下文使用者访问 state 对象(见下文):

/* In your app component's render() method, wrap children with context provider */
<IsUseContext.Provider value={ this.state }>
  <LimitsIndicator />
  <InputComponent />
</IsUseContext.Provider>

<强>4。更新子组件中的共享状态

最后，我们通过上下文的使用者从应用程序中的嵌套子组件访问共享的 limitInUse。请注意，传递给提供程序的 value 属性的对象中定义的状态和 setter 方法是可用且可访问的:

/* Update shared limitInUse state via context consumer */
return (<IsUseContext.Consumer>
  { ({ setLimitInUse }) => <input onChange={ 
     (event) => setLimitInUse(event.currentTarget.value) } />
  }
</IsUseContext.Consumer>)

在子组件中显示共享状态

/* Access shared limitInUse via context consumer */
return (<IsUseContext.Consumer>
  { ({ limitInUse }) => (<div>  {limitInUse} </div>) }
</IsUseContext.Consumer>)

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