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

Question

我是 React JS 的新手。我正在 React 中进行 CRUD 操作。一切都很好，但是当我从列表中删除项目时，我必须刷新浏览器来更新列表。我该如何解决这个问题？

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

上面的代码是 EmployeeList 组件，由 ** /employeeList ** 路由。这是代码的用户界面

当我从列表中删除项目时，我需要重新加载浏览器以更新列表。我尝试在 useEffect 中使用员工依赖

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

这工作正常，但 API 方法正在无限执行。我该如何解决这个问题？

Answer 1

可以做两件事

1. 如果您的删除 api 返回更新的数据，您只需调用setEmployess并设置更新的值即可。

2. 或者您可以从状态中过滤已删除的值 employees

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