如何在數據更改后僅重新渲染一次組件？

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. 或者您可以從 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

而不是刷新頁面，您應該在刪除請求后發出另一個請求以獲取更新的員工列表。

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

}