Использование локального хранилища в ReactJS

Question

Я делаю проект коробки рецептов, у меня есть состояние рецепта с массивом объектов рецепта.

Я использую функцию saveToLocal для сохранения текущего состояния в локальном хранилище, например:

 saveToLocal = () => {
 const local = this.state.recipe;
 localStorage.setItem("recipe", JSON.stringify(local));
}

и передать его функциям, которые добавляют, редактируют или удаляют новый рецепт, подобный этому

 addNewRecipe = (newRecipe) => {
  this.setState({
  recipe: [...this.state.recipe,newRecipe]
  }, this.saveToLocal);
}

 editRecipe = (recipe) => {
   let selectedRecipe =this.state.recipe.find(obj=>obj.count==recipe.count)
   let editedRecipe = Object.assign(selectedRecipe,recipe);
   this.setState(Object.assign(this.state.recipe,editedRecipe),this.saveToLocal)
}

deleteRecipe = (recipe) => {
  let arr = this.state.recipe.filter(obj => obj.count !== recipe.count);
}

Однако, это не работает, когда я обновляю приложение, но когда я проверяю локальное хранилище внутри инструмента проверки, у localalstorage все еще есть данные рецепта. Как это исправить?

Спасибо

Answer 1

Если я правильно понял, вы хотите получить сохраненный рецепт при обновлении. Вы должны использовать componentDidMount и получить рецепт от localStorage, а затем установить свое состояние в соответствии с этим.

componentDidMount() {
    const recipe = JSON.parse( localStorage.getItem( "recipe" ) );
    this.setState( { recipe } );
}

Вы можете проверить рецепт и условно отрендерить ваш компонент:

render() {
    if( !this.state.recipe.length ) {
        return <p>No recipe</p>;
        // or you can use a spinner here
    }
    return { how you handle your recipe here, map it etc. }
}

Answer 2

Сохранение в локальном хранилище и получение из локального хранилища двумя различными способами.

localStorage.setItem(‘recipe’, JSON.stringify(this.state.recipe)

const recipe = localStorage.getItem(‘recipe’)

this.setState({...recipe})

Вам не нужно создавать метод saveToLocal

Answer 3

Затем вы можете использовать localStorage.getItem("recipe"), чтобы получить его. Сделайте консольный журнал для этого внутри вашей функции рендеринга и проверьте JS Console вашего браузера.

render() {
   console.log('recipe is', localStorage.getItem("recipe"))
}

Ваше localStorage будет оставаться на диске до тех пор, пока вы не очистите кеш.