reactjs - Deleting item in redux state is working in Firefox but not in Chrome

Question

I'm developing a website with MERN stack (and Redux), and I have an issue with the delete item method.

In Firefox, everything is working fine, the item is deleted in database and in redux state, so the component is updated and the item disappear on screen. In Chrome, the item is deleted in database, but on screen it's working maybe once time in 3, the item is not deleted in the array petsList so it doesn't disappear either in component view.

There is the initial state and the delete method in the pets reducer :

    const initialState = {
    petsList: [],
    currentPet: {},
    id: null,
    name: '',
    age: '',
    species: '',
    breed: '',
    sex: 'male',
    birthdate: '',
    ide: '',
    weight: [],
    vaccine: [],
    deworming: [],
    antiflea: [],
    avatar: {},
    avatarUrl: '',
    open: false,
    isPetsLoading: false,
    isPetsLoaded: false,
    errorOnField: false,
    userId: '',
};

case DELETE_PET:
        return {
            ...state,
            petsList: [...state.petsList.filter((pet) => pet._id !== action.id)],
        };

The redux action :

 export const deletePet = (id) => ({
  type: DELETE_PET,
  id
});

The pet details component is as below :

import React, { useEffect, useState } from 'react';
import dayjs from 'dayjs';
import { Link, useParams, useHistory } from 'react-router-dom';
import PropTypes from 'prop-types';

import backIcon from '../../../assets/icons/left-arrow-2.png';
import cancelIcon from '../../../assets/icons/close.png';
import weightIcon from '../../../assets/icons/kitchen-scale.png';
import vaccineIcon from '../../../assets/icons/syringe.png';
import fleaIcon from '../../../assets/icons/flea.png';
import wormIcon from '../../../assets/icons/jelly.png';

import './PetDetails.scss';

const PetDetails = ({
    pet,
    saveCurrentPet,
    saveCurrentWeight,
    saveCurrentVaccine,
    deletePet,
}) => {
    const [showDetails, setShowDetails] = useState(false);
    // useParams is used to retrieve the id in url params to filter the pet to display
    const params = useParams();
    const history = useHistory();

console.log('PET', pet);

useEffect(() => {
    setShowDetails(true);
    saveCurrentPet(pet);
    saveCurrentWeight(pet.weight);
    saveCurrentVaccine(pet.vaccine);
    localStorage.setItem('pet_id', pet._id);
}, []);

const handleDelete = () => {
    deletePet(pet._id);
    history.push('/home');
};

return (
    <div className={showDetails ? 'pet-details' : 'pet-details-hidden'}>
        <Link to="/home">
            <div className="back-icon-container">
                <img className="back-icon" src={backIcon} alt="left arrow" />
            </div>
        </Link>
        
        <div className="pet-details-content">
            <div className="pet-delete">
                <button className="pet-delete-btn" type="button" onClick={handleDelete}>
                    <img src={cancelIcon} alt="cancel croce" />
                </button>
            </div>
            <div className="pet-details-content-infos">
                <div className="pet-details-content-infos-avatar">
                    <img src={pet.avatarUrl} alt="profile avatar" />
                </div>
                <div className="pet-details-content-infos-general">
                    <div className="pet-details-name">
                        <h3>Nom :</h3>
                        <p>{pet.name}</p>
                    </div>
                    <div className="pet-details-age">
                        <h3>Age :</h3>
                        <p>{pet.age}</p>
                    </div>
                    <div className="pet-details-species">
                        <h3>Espèce :</h3>
                        <p>{pet.species}</p>
                    </div>
                    <div className="pet-details-breed">
                        <h3>Race :</h3>
                        <p>{pet.breed}</p>
                    </div>
                    <div className="info-sex">
                        <h3>Sexe :</h3>
                        <p>{pet.sex}</p>
                    </div>
                    <div className="info-birthdate">
                        <h3>Date de naissance :</h3>
                        <p>{dayjs(pet.birthdate).format('DD/MM/YYYY')}</p>
                    </div>
                    <div className="info-ide">
                        <h3>Numéro d'identification :</h3>
                        <p>{pet.ide}</p>
                    </div>
                    <div className="edit-link">
                        <button type="button" className="edit-btn">
                            <Link to={`/pet/edit/${params.petId}`}>Editer</Link>
                        </button>
                    </div>
                </div>
            </div>
            <div className="details-links">
                <div>
                    <Link className="details-links-item" to={`/pet/${pet._id}/weight`}>
                        <img src={weightIcon} alt="weight tool" />
                        <p>Poids</p>
                    </Link>
                </div>
                <div>
                    <Link className="details-links-item" to={`/pet/${pet._id}/vaccine`}>
                        <img src={vaccineIcon} alt="vaccine syringe" />
                        <p>Vaccins</p>
                    </Link>
                </div>
                <div>
                    <Link className="details-links-item" to={`/pet/${pet._id}/antiflea`}>
                        <img src={fleaIcon} alt="flea" />
                        <p>Anti-puces</p>
                    </Link>
                </div>
                <div>
                    <Link className="details-links-item" to={`/pet/${pet._id}/deworming`}>
                        <img src={wormIcon} alt="worms" />
                        <p>Vermifuge</p>
                    </Link>
                </div>
            </div>
        </div>
    </div>
);

Somebody to help me ?

Answer 1

等待大神答复