如何在数据更改后仅重新渲染一次组件？

Question

I am new to React JS. I am making CRUD Operation in React. Everything is fine but when I delete the item from the list I have to refresh the browser tho update the List. How can I solve this?

import React, { useState, useEffect } from 'react'
import axios from 'axios';
import { Segment, Item, Container, Card, Icon, Button } from 'semantic-ui-react';
import { IEmployee } from '../../src/Model/activity'
import { Link, RouteComponentProps } from 'react-router-dom';


interface DetailParams {
    id: string;
}


const EmployeeList : React.FC<RouteComponentProps<DetailParams>> = ({ match, history }) => {

    const [employees, setEmployees] = useState<IEmployee[]>([])

    useEffect(() => {
        axios.get('https://localhost:44353/Employee/GetEmployeeList')
            .then((response) => {
                setEmployees(response.data)
            })
    }, [])


    const deleteEmployee =(id: string) => {
        axios.get(`https://localhost:44353/Employee/DeleteEmployee/${id}`)
            .then((response) => {
            history.push('/employeeList')
        })
    }

    return (
        <Container style={{ marginTop: '7em' }}>
            <Segment>
                {
                    employees.map(employee => (
                            <Card key={employee.id}>
                                {/* <Image src='/images/avatar/large/daniel.jpg' wrapped ui={false} /> */}
                                <Card.Content>
                                    <Card.Header>{employee.firstName}</Card.Header>
                                    <Card.Meta>{employee.address}</Card.Meta>
                                        <Card.Description>
                                     {employee.organization}
                                </Card.Description>
                                </Card.Content>

                             <Card.Content>
                             
                             
                             <Button
                               
                                onClick={() => deleteEmployee(employee.id)}
                                floated="right"
                                content="Delete"
                                color="red" />

                             <Button
                                as={Link} to={`/edit/${employee.id}`}
                                floated="right"
                                content="View"
                                color="blue" />

                             </Card.Content>

                            </Card>
                    ))
                }
            </Segment>
        </Container>
    )
}

export default EmployeeList

The above code is of EmployeeList Component which is routed by ** /employeeList **. Here is the UI of the code

when I delete the item from the list I need to reload the browser to update the List. I tried using employee dependent in useEffect

useEffect(() => {
        axios.get('https://localhost:44353/Employee/GetEmployeeList')
            .then((response) => {
                setEmployees(response.data)
            })
    }, [employees])

this worked fine but the API method is executing infinitely. How do I solve this?

Answer 1

Two things can be done

1. if your delete api returns the updated data you can just call setEmployess and set the updated value.

2. or you can filter the deleted value from the state employees

   const deleteEmployee =(id: string) => { //add this in axios call success let updatedEmployee = [...employees]; updatedEmployee.filter(eachEmployee=>eachEmployee.id;== id); setEmployees(updatedEmployee); }

Answer 2

Instead of refreshing the page you should just make another request after the delete request to get an updated employees list.

const deleteEmployee = async (id: string) => {
    // Delete employee
    await axios.get(`https://localhost:44353/Employee/DeleteEmployee/${id}`)
    
    // Get a fresh list 
    const employees = (await axios.get('https://localhost:44353/Employee/GetEmployeeList')).data
    setEmployees(employees)
    
    // Navigate
    history.push('/employeeList')

}