React Context API - 在页面刷新时持久化数据答案

【问题标题】：React Context API - persist data on page refreshReact Context API - 在页面刷新时持久化数据
【发布时间】：2019-04-26 11:44:59
【问题描述】：

假设我们设置了一个上下文提供程序，以及一些初始数据属性值。

在某个地方，假设消费者随后修改了这些属性。

页面重新加载时，这些更改会丢失。持久化数据以便我们保留这些数据修改的最佳方法是什么？除了简单的本地存储还有什么方法吗？

【问题讨论】：

您好，我可以知道您为保持上下文 api 状态而遵循的解决方案吗？

标签： reactjs persistence react-context

【解决方案1】：

是的，如果您希望数据在重新加载时保持不变，您可以选择将该信息存储在服务器端（通过 api 调用）或浏览器存储（本地存储、会话存储、cookie）中。您要使用的选项取决于您希望达到的持久性级别。无论存储选择如何，它都可能看起来类似于

const MyContext = React.createContext(defaultValue);

class Parent extends React.Component {
  setValue = (value) => {    
    this.setState({ value });
  }

  state = {
    setValue: this.setValue,
    value: localStorage.getItem("parentValueKey")
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.state.value !== prevState.value) {
      // Whatever storage mechanism you end up deciding to use.
      localStorage.setItem("parentValueKey", this.state.value)
    }
  }

  render() {
    return (
      <MyContext.Provider value={this.state}>
        {this.props.children}
      </MyContext.Provider>
    )
  }
}

【讨论】：

我也想通过 Provider 来看看这个

【解决方案2】：

上下文不会以您想要的方式持续存在。这是我所做的一个示例，使用带有 React 钩子的无状态函数。

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

export function sample(){
  // useState React hook
  const [data, setData] = useState({})
  const [moreData, setMoreData] = useState([])

  // useState React hook
  useEffect(() => { 
    setData({test: "sample", user: "some person"})
    setMoreData(["test", "string"])
  }, [])

  return data, moreData
}

export const AppContext = React.createContext()

export const AppProvider = props => (
  <AppContext.Provider value={{ ...sample() }}>
    {props.children}
  </AppContext.Provider>
)

从一开始就了解这是一种解决方法，而不是永久解决方案。持久化数据是数据库的工作，而不是客户端的工作。但是，如果您需要持久化数据进行开发，这是一种方法。首先注意我使用的是React hooks。这是从 16.8 开始完全支持的功能。 useEffect() 替换了类声明中的生命周期方法，例如上面的 TLadd。他正在使用componentDidUpdate 来坚持。这样做的最新方法是useEffect。当应用程序刷新时，将调用此方法并在上下文中设置一些硬编码数据。

使用提供者：

import React from 'react'
import Component from './path/to/component'
import { AppProvider } from './path/to/context'

const App = () => {
  return (
    <AppProvider>
      <Component />
    </AppProvider>
  )
}

当您刷新时，data 和 moreData 仍将具有您分配给它们的任何默认值。

【讨论】：

请注意它是React.createContext 而不是React.CreateContext
这对我不起作用。可以在 here - Alex Krush 的 article 找到有点不同的方法。
这仅适用于静态数据。但是，如果您需要从 API 检索的数据以持久存储或用于用户更改的数据，这是我理解的要求，它不起作用......

【解决方案3】：

我假设您已经熟悉设置上下文和设置上下文提供程序。

您可以做的一件事是将值存储在浏览器的 Cookie 或您可用的任何存储中，然后在您的 Context Provider 中检索该值，如果可以找到，则设置它，如果没有, 设置默认值。如果提供程序文件是基于类的组件，您希望在constructor() 中检索此值，否则如果它是功能性的，您可以使用useLayoutEffect() 进行设置。

【讨论】：