Question

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

大致说来，消费者随后修改了这些属性。

在页面重新加载时，这些更改将丢失。保留数据以便保留这些数据修改的最佳方法是什么？除了本地存储，还有其他方法吗？

Answer 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")
    }
  }

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

Answer 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 Context API-在页面刷新时保留数据

2 个答案: