React aktualizacja DOM po usunięciu komponentu

Question

Witam.

Jestem w trakcie pisania własnej apki typu todo (wiem oklepany temat do bólu, ale całkiem przyjemnie się go pisze). Posiadam container który pobiera dane z serwera w componentDidMount, i następnie przekazuje je do state metodą setState. Na podstawie danych w state, container renderuje listę zadań. Każdy element posiada możliwość usuniecia, czyli wysłania polecenia Delete do serwera który usuwa dany element. Jednak dalej jest on widoczny na stronie do czasu odświeżenia. Teraz pytanie jak (najlepiej bez przeładowania strony) pozbyć sie tego elementu z widoku po usunięciu z bazy danych.

 

import React, { Component } from 'react';
import Todo from '../components/Todo/Todo';
import NewTodo from '../components/NewTodo/NewTodo';
import axios from 'axios';

class TodoPanel extends Component {

    state = {
        todos: [],
        todoToRemove: ""
    }

    componentDidMount () {
        if(this.state.todoToRemove === ""){
            axios.get("/api/todos")
            .then(todos => {
                console.log(todos);
                this.setState({todos: todos.data})
            });
        }
    }

    removeTodoHandler = (id) => {
        console.log(id);
        axios.delete('/api/todos/' + id)
            .then(response => {
                console.log(response);
            });
    }

    render() {

        return(
            <React.Fragment>
                {this.state.todos.map( (todo) => {
                        return(
                          <Todo 
                            title={todo.name}
                            key={todo._id}
                            indexValue={todo._id}
                            completed={todo.completed}
                            removed={() => this.removeTodoHandler(todo._id)}

                          /> 
                        );
                        
                })}

                <NewTodo />
            </React.Fragment>
        );
    }
}

export default TodoPanel;

 

Answer 1

Twój komponent przede wszystkim się nie re-renderuje po użyciu funkcji removeTodoHandler. Warto, żebyś wiedział, że przede wszystkim zmiana wartości obiektu state powoduje ponowne wyrenderowanie komponentu. Z tego co widzę, to tylko usuwasz todo ze swojego api, a twój obiekt state pozostaje bez zmiany, więc masz parę rozwiązań. Możesz pójść na skróty i skorzystać z metody forceUpdate(), która pozwala wyrenderować komponent bez zmieniania obiektu state, ale to rozwiązanie chyba nie jest najlepsze. Możesz również pomyśleć nad użyciem setState() w jakiś sprytny sposób. Tym bardziej, że masz zrobioną specjalną wartość todoToRemove, której zbytnio nie używasz. Mam nadzieję, że udało mi się z grubsza przedstawić problem i rozumiesz gdzie to nie gra. Albo skorzystaj z forceUpdate(), ale nie jest to w sposób 'myślenia Reactowego', więc jeszcze lepiej odpowiednio pobaw się swoim stanem. 

Comments

Jak najbardziej przedstawiłeś problem teraz już wiem co jest nie tak i w którym kierunku muszę działać. Dzięki wielkie.

---

forceUpdate() - nie polecam.

Możesz  też wykorzystać ponowne zapytanie do bazy danych uwzględniająć aktualizowane dane, więc na nowo wywołać update state- biorąć dane z bazy

---

Ponowne zapytanie w funkcji removeTodoHandler()?

---

Każda funkcja powinna teoretycznie robić tylko jedną rzecz, ale zawsze możesz sobie w funkcji removeTodoHandler() wywołać funkcję, która już będzie pobierała nowe dane z bazy. :)

---

szacun że ktoś na SOLID zwrócił uwagę Single resposibility <3