reactjs - 删除 redux 状态的项目在 Firefox 中有效，但在 Chrome 中无效

Question

我正在使用 MERN 堆栈（和 Redux）开发一个网站，但我对删除项目方法有疑问。

在 Firefox 中，一切正常，项目在数据库中被删除并处于 redux 状态，因此组件被更新并且项目在屏幕上消失。在 Chrome 中，该项目在数据库中被删除，但在屏幕上它可能会在 3 中工作一次，该项目不会在数组 petsList 中删除，因此它也不会在组件视图中消失。

pets reducer 中有初始状态和删除方法：

    const initialState = {
    petsList: [],
    currentPet: {},
    id: null,
    name: '',
    age: '',
    species: '',
    breed: '',
    sex: 'mâle',
    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)],
        };

还原动作：

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

宠物详情组件如下：

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

有人帮我吗？

标签： reactjsredux