React Context API - 在页面刷新时保留数据

IT技术 reactjs persistence react-context
2021-03-26 12:42:35

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

沿着这条线的某个地方,假设消费者然后修改了这些属性。

在页面重新加载时,这些更改将丢失。持久化数据以便我们可以保留这些数据修改的最佳方法是什么?除了简单的本地存储之外还有其他方法吗?

2个回答

是的,如果您希望数据在重新加载时保持不变,您的选择将是将该信息存储在服务器端(通过 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>
    )
  }
}
我也想通过提供者看到这一点
2021-05-28 12:42:35

上下文不会以您想要的方式持续存在。这是我所做的一个示例,使用带有 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
2021-05-26 12:42:35
这只适用于数据是静态的。但是,如果您需要从 API 检索数据以保留在存储中或用于用户更改的数据,这就是我所理解的要求,它不起作用......
2021-05-30 12:42:35
这对我不起作用。可以在此处找到该方法略有不同的方法- Alex Krush文章
2021-06-15 12:42:35