web-dev-qa-db-fra.com

React API de contexte - conserver les données lors de l'actualisation de la page

Supposons que nous ayons un fournisseur de contexte configuré, ainsi que des valeurs initiales de propriété de données.

Quelque part le long de la ligne, disons qu'un consommateur modifie ensuite ces propriétés.

Lors du rechargement de la page, ces modifications sont perdues. Quelle est la meilleure façon de conserver les données afin que nous puissions conserver ces modifications de données? Une méthode autre que le simple stockage local?

reactjspersistencereact-context
9
Cog

Oui, si vous voulez que les données persistent pendant les rechargements, vos options vont stocker ces informations côté serveur (via un appel API) ou dans le stockage du navigateur (stockage local, stockage de session, cookies). L'option que vous voudrez utiliser dépend du niveau de persistance que vous cherchez à atteindre. Quel que soit le choix de stockage, il ressemblerait probablement à quelque chose

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>
    )
  }
}
3
TLadd

Le contexte ne persiste pas comme vous le souhaitez. Voici un exemple de ce que j'ai fait, en utilisant une fonction sans état avec des crochets 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>
)

Comprenez dès le départ qu'il s'agit d'une solution de contournement et non d'une solution permanente. La persistance des données est le travail d'une base de données, pas du client. Cependant, si vous avez besoin de données persistantes pour le développement, c'est une façon. Notez d'abord que j'utilise React hooks . Il s'agit d'une fonctionnalité entièrement prise en charge à partir de 16.8. La useEffect() remplace les méthodes de cycle de vie trouvées dans les déclarations de classe comme celle de TLadd ci-dessus. Il utilise componentDidUpdate pour persister. La façon la plus récente de le faire est useEffect. Lorsque l'application est actualisée, cette méthode sera appelée et mettra en contexte certaines données codées en dur.

Pour utiliser le fournisseur:

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

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

Lorsque vous actualisez, data et moreData auront toujours les valeurs par défaut que vous leur affectez.

3
Jonathan Whittle