Очистка локального хранилища после перезагрузки страницы при - PullRequest
Новая
       24

Очистка локального хранилища после перезагрузки страницы при

0 голосов
/ 01 ноября 2018

ребята! Я пытаюсь сохранить список задач в localStorage и получить его, когда страница загружается или перезагружается. Но после этого localStorage очищается. Что не так, ты знаешь? Может быть, я использую неподходящие методы жизненного цикла компонента? Я проверяю наличие в списке задач localStorage, когда компонент монтируется. После этого я сохраняю массив в localStorage до обновления компонента.

Компонент списка: 

import React from 'react'
import { connect } from 'react-redux'
import Todo from './Todo'
import AddTodoForm from './AddTodoForm'
import { checkTodos } from '../actions/index';
import './TodoList.css'

class TodoList extends React.Component {
    componentDidMount() {
        if (localStorage.getItem("todos")) {
            this.props.check(JSON.parse(localStorage.getItem("todos")));
        }
    };


    componentWillUpdate(nextProps, nextState) {
        localStorage.setItem("todos", JSON.stringify(nextProps.todos));
    };

    render() {
        return (
            <div>
                <AddTodoForm />
                { this.props.todos && this.props.todos.length !== 0 ?
                <table>
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Title: </th>
                            <th>Status: </th>
                        </tr>
                    </thead>
                    <tbody>
                        { this.props.todos.map((todo) => <Todo key={todo.id} todo={todo} />) }
                    </tbody>
                </table> : <span>There no todos yet</span> }
            </div>
        );
    };
};

const mapStateToProps = (state) => ({ todos: state.todos });
const mapActionsToProps = (dispatch) => ({ check: (todos) => 
dispatch(checkTodos(todos)) });

export default connect(mapStateToProps, mapActionsToProps)(TodoList);

Разбавление: 

const todoReducer = (state = [], action) => {
    switch (action.type) {
        case "CHECK_TODOS":
            return [...state];
        case "ADD_TODO":
            return [...state, action.payload];
        case "REMOVE_TODO":
            return state.filter((todo) => todo.id !== action.payload);
        case "TOGGLE_COMPLETED":
            return state.map((todo) => todo.id === action.payload ? 
    {...todo, completed: !todo.completed} : todo);
            default:
                return state;
            }
};

export default todoReducer;
...