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 Component的，由** / employeeList **路由。这是代码的用户界面

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

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

这很好用，但是API方法正在无限执行。我该如何解决？

Answer 1

可以做两件事

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

，或者您可以从状态employees

中过滤已删除的值

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


 }

Answer 2

除了刷新页面外，您还应该在删除请求之后再提出一个请求，以获取更新的员工列表。

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')

}

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

2 个答案: