如何在前端检查后端实现的条件并显示成功和错误消息？

如何解决如何在前端检查后端实现的条件并显示成功和错误消息？

我使用 mern 堆栈创建了一个应用程序，其中所有公司详细信息都将在表格中检索，当单击“查看”按钮时，公司详细信息将显示在模式中 弹出窗口以及与所选公司关联的客户的详细信息。每个客户详细信息都显示在一张卡片中，该卡片包含编辑和删除按钮。客户只有在没有任何关联项目时才能删除。我已经完成了这个功能的前端和后端部分，我想知道如何在无法删除客户端时在前端显示错误消息以及在可以删除客户端时如何显示成功消息。到目前为止我已经实现的后端和前端代码如下：

后端： 客户端控制器.js

exports.delete = async(req,res)=> {
  const id = req.query.id;
  try{
    const project = await Project.find({clientID:id});
    console.log(project);
    if(Object.keys(project).length == ""){
      const deletedClient = await Client.findByIdAndDelete(id);
      /*Removing image from filesystem */
      fs.unlink(`uploads/${deletedClient.clientProfilePic}`,(err) =>{
        if(err) throw err;
        console.log(
          'Image successfully deleted from filesystem:',deletedClient.clientProfilePic
        );
      });
      res.status(200).json({
        deletedClient
      });
    }else{
      res.status(500).json({
        errorMessage: 'Cannot delete client!',});
    }
  }catch(err){
    console.log(err,'clientsController.delete error');
    res.status(500).json({
      errorMessage: 'Please try again later',});
  }
};

前端： clientReducers.js

import { GET_CLIENTS,DELETE_CLIENT } from "../constants/clientConstants";

const INITIAL_STATE = {
    clients: []
};

const clientReducer = (state=INITIAL_STATE,action) => {
    switch (action.type){
        case GET_CLIENTS:
            return{
                clients: [...action.payload]
            };
        case DELETE_CLIENT:
            return{
                clients: state.clients.filter(client => client._id !== action.payload._id)
            };
        default:
            return state;
    }
};
export default clientReducer;

clientAction.js

export const deleteClient = clientId => async dispatch => {
    try{
        const response = await axios.delete(`clients/clientId?id=${clientId}`);
        dispatch({
            type: DELETE_CLIENT,payload: response.data,});
    }catch(err){
        console.log('deleteClient api error',err);
    }
};

Contacts.js

<Row className="top-bord">
                {clients.map(client => (
                  <ClientCard key={company._id} client={client} passfunction={() => {handleShowSub(client)}} deletepassFunction={()=> dispatch_(deleteClient(client._id))}/>
                ))}
  </Row>

clientCard.js

import React from "react";
import Card from 'react-bootstrap/Card'
import DeleteOutlineIcon from '@material-ui/icons/DeleteOutline';
import EditOutlinedIcon from '@material-ui/icons/EditOutlined';

 export const clientCard = ({client,passfunction,deletepassFunction}) => {
    return(
    <Card  className="text-center card-mine" >
        <Card.Header onClick={passfunction}>{client.clientFirstName} {client.clientLastName}</Card.Header>
        <Card.Body onClick={passfunction} >
            <Card.Text >
            {client.clientContactNumber}
            <br></br>
            {client.clientEmail}
            <br></br>
            {client.clientJob}
            </Card.Text>
        </Card.Body>
        <Card.Footer >
            <button className="btn btn-info ClientEditBtn" onClick={deletepassFunction}>
                <DeleteOutlineIcon></DeleteOutlineIcon>
            </button>
            <button className="btn btn-info ClientDeleteBtn">
                <EditOutlinedIcon></EditOutlinedIcon>
            </button>
        </Card.Footer>
    </Card>
    )

 };

export default clientCard;