reactjs - component doesn't render after state changes

Question

After delete it doesn't remove the row from the table. After on-click action, it is updating the Database, Array, and the state correctly, but doesn't render my view, because I still see the row. Once I leave the page and come back, the record is gone; However, that makes sense because the database is updated by post request. I have consoled the array as well as the state, both are updating after delete.

import React,{ PureComponent } from 'react';
import ReactDom from 'react-dom';
import axios from 'axios';

class Listing extends PureComponent{

    state = {
        categories: []
    };

    componentDidMount(){
        axios.get('http://127.0.0.1:8000/category')
            .then(response=>{
                this.setState({categories:response.data});
            });
    }

    deleteCategory = (e)=>{
        axios.delete('http://127.0.0.1:8000/category/delete/'+e)
            .then(response=> {
                var array = this.state.categories;
                    for(var i = 0 ; i < array.length ; i++){
                        if(array[i].id == e){
                            array.splice(i,1);
                            this.setState({categories:array});
                        }
                    }
            });
    }


    render() {
        return(
          <div>
                <table className="table">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Category Name</th>
                            <th scope="col">Status</th>
                            <th scope="col">Created At</th>
                            <th scope="col">Updated At</th>
                            <th scope="col">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            this.state.categories.map(category=>{
                                return(
                                    <tr>
                                        <th scope="row">{category.id}</th>
                                        <td>{category.name}</td>
                                        <td>{category.active == 1 ? ("Active"): ("InActives")}</td>
                                        <td>{category.created_at}</td>
                                        <td>{category.updated_at}</td>
                                        <td><button className="btn btn-danger" onClick={(e)=>this.deleteCategory(category.id)}>Delete</button> </td>
                                    </tr>
                                )
                            })
                        }

                    </tbody>
                </table>
            </div>
        );
    }

}

export default Listing;

See also: [Why can't I directly modify a component's state, really?](https://stackoverflow.com/q/37755997/1218980) — Emile Bergeron, Oct 08 '20 at 23:09

score 0 · Accepted Answer · answered Oct 08 '20 at 22:53

State should not be mutated in React. If you need to remove items from an array, if you're going to use splice, you should copy the array first, eg:

const categoriesCopy = [...this.state.categories];

But using splice in a for loop will also lead to certain array elements being skipped, since you're mutating the array while iterating over it.

Use .filter instead:

const { categories } = this.state;
this.setState({
    categories: categories.filter(cat => cat.id !== e)
});

reactjs - component doesn't render after state changes

1 Answers1