reactjs - 单击 React.js 从数组中删除值

Question

我正在构建一个图像 slider ，用于映射并列出一组图像 url。

我正在尝试保存一组图像 url，用户希望从 View 中隐藏这些 u​​rl。

我的计划是将数组值存储在 dynamoDB 表中，然后检索不想显示的 url 数组，然后从 slider 中的映射图像中过滤掉它们。

我在他们点击的图像上显示了一个 EyeOFF 图标，它通过图像和图标的 onClick 属性切换图标隐藏真假。 --- 参见 const handleBottomImageClick()。

我的问题是我无法从保存在状态变量 selectedImage 中的数组中删除图像 (img url) 的值。 --- 参见 const handleTopImageClick()。

我尝试了 array.pop() 和 array.splice()，但我不知道这些方法是否对我正在尝试的工作有效做。

slider 组件

import React, { useState, useEffect, useRef } from "react";
import { IonModal, IonContent, IonButton, IonIcon, IonGrid, IonRow, IonCol, IonItem, IonLabel } from '@ionic/react';
import { chevronBackOutline, chevronForwardOutline } from 'ionicons/icons';
import { Storage } from "aws-amplify";
import Image from '../components/SliderImages.js';
import FullImage from '../components/LargeSliderImage.js';
import Slider from "react-slick";
import "slick-carousel/slick/slick.scss";
import { chunk } from 'lodash';
import Modal from 'react-modal';
import { eyeOffOutline, createSharp, shareSharp } from 'ionicons/icons';




const SliderComponent = (props) => {

    const { job, hideImages } = props;
    const [selectedImage, setSlectedImage] = useState([]);
    const [images, setImages] = useState([]);
    const [showModal, setShowModal] = useState(false);
    const [activeSlide, setActiveSlide] = useState(false);
    const [initialSlide, setInitialSlide] = useState(0)
    const [state, setState] = useState({
        nav1: null,
        nav2: null
    });
    const slider1 = useRef();
    const slider2 = useRef();

       let imagesToHide = [];

    const SlickArrowLeft = ({ ...props }) => (

        <IonIcon  {...props} type="button" size="large" icon={chevronBackOutline} />

    );

    const SlickArrowRight = ({ ...props }) => (
        <IonIcon {...props} type="button" size="large" icon={chevronForwardOutline} />
    );


    const customStyles = {
        content: {
            top: '50%',
            left: '50%',
            right: 'auto',
            bottom: 'auto',
            marginRight: '-50%',
            transform: 'translate(-50%, -50%)'
        }
    };

    useEffect(() => {
        setState({
            nav1: slider1.current,
            nav2: slider2.current
        });
    }, []);

    const {
        nav1,
        nav2
    } = state;

    const settings = {
        infinite: false,
        lazyLoad: "ondemand",
        useCSS: true,
        useTransform: true,
        slidesToShow: 5,
        slidesToScroll: 5,
        speed: 500,
        initialSlide: 0,
        autoHeight: false,
        draggable: true,
        arrows: true,
        prevArrow: <SlickArrowLeft class="prevArrowButton" />,
        nextArrow: <SlickArrowRight class="nextArrowButton" />,

        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    lazyLoad: "ondemand",
                    slidesToShow: 4,
                    slidesToScroll: 4,
                    speed: 500,
                    initialSlide: 0,
                    autoHeight: false,

                    arrows: false,
                }
            },
            {
                breakpoint: 600,
                settings: {
                    lazyLoad: "ondemand",
                    slidesToShow: 3,
                    slidesToScroll: 3,
                    speed: 500,
                    initialSlide: 0,
                    autoHeight: false,

                    arrows: false,

                }
            },
            {
                breakpoint: 480,
                settings: {
                    lazyLoad: "ondemand",
                    slidesToShow: 2,
                    slidesToScroll: 2,
                    speed: 500,
                    initialSlide: 0,
                    autoHeight: false,

                    arrows: true,
                    prevArrow: <SlickArrowLeft class="prevArrowButton" />,
                    nextArrow: <SlickArrowRight class="nextArrowButton" />,
                }
            }
        ]
    };

    const viewSettings = {
        infinite: true,
        lazyLoad: "ondemand",
        slidesToShow: 1,
        slidesToScroll: 1,
        speed: 500,
        autoHeight: false,
        focusOnSelect: false,
        initialSlide: initialSlide,
        arrows: true,
        prevArrow: <SlickArrowLeft class="prevArrowButton" />,
        nextArrow: <SlickArrowRight class="nextArrowButton" />,

    }


    useEffect(() => {
        async function onLoad() {

            try {
                const downloadedImage = await getImage(job);
                setImages(downloadedImage);
            } catch (e) {
                alert(e);
            }
        }

        onLoad();
    }, [job]);


    async function getImage(jobID) {
        const imageURL = await Storage.list(`${jobID}/completed/`);
        let imagesToDownload = imageURL
        let imagesAsArray = [];
        for (let i = 0; i < imagesToDownload.length; i++) {
            const imagesDownloaded = await getURLFromS3(imagesToDownload[i]);
            imagesAsArray.push(imagesDownloaded)
        }
        return imagesAsArray
    }

    async function getURLFromS3(fileToDownload) {
        const result = await Storage.get(fileToDownload.key)
        return result;
    }


    const handleBottomImageClick = function (index, image2) {
        if (hideImages) {
            if (selectedImage[image2]) {
                setSlectedImage({ ...selectedImage, [image2]: false })
            } else {
                setSlectedImage({ ...selectedImage, [image2]: !selectedImage[image2] })
            }

        } else {

            setShowModal(true)
            const i = index + index + 1
            setInitialSlide(i)

        }

    }

    const handleTopImageClick = function (index, image1) {
        if (hideImages) {
            if (selectedImage[image1]) {
                const arr = [selectedImage]
                arr.splice(selectedImage[image1])
                setSlectedImage(arr)
            } else {
                setSlectedImage({ ...selectedImage, [image1]: !selectedImage[image1]})
            }
        } else {
            setShowModal(true)
            const i = index + index
            setInitialSlide(i)
        }
    }


    return (
        <>
            {hideImages ? (

                <div className="ion-padding" style={{ textAlign: "center" }}>
                    <IonLabel position="stacked"> Select the images you want to hide from the customer view. Tap finished when done. </IonLabel>
                    <br /><br />
                    <div style={{ justifyContent: 'center', display: "flex" }}>
                        <IonButton onClick={() => console.log(selectedImage)} size="small">
                            Finished
                    </IonButton>
                    </div>
                    <br />
                </div>

            ) : (
                    null
                )}
            <div style={{ justifyContent: 'center', display: "flex" }}>

                <Slider className="image-slider-frame" asNavFor={nav1} ref={slider => (slider1.current = slider)} {...settings}>
                    {chunk(images, 2).map(([image1, image2], i) =>

                        <ul className="listing-image-slidee" key={i}>

                            <div>
                                <li className="listing-image-pairs">
                                    <img onClick={() => {handleTopImageClick(i, image1);} } height="206px" width="272px" className="img" src={image1} />
                                    <IonIcon onClick={() => handleTopImageClick(i, image1)} className="image-hide" key={image1} size="large" hidden={selectedImage[image1] ? false : true} icon={eyeOffOutline} />
                                </li>
                            </div>

                            <div >
                                {image2 && <li className="listing-image-pairs">
                                    <img onClick={() => handleBottomImageClick(i, image2)} height="206px" width="272px" className="img" src={image2} />
                                    <IonIcon className="image-hide" key={image2} size="large" onClick={() => handleBottomImageClick(i, image2)} hidden={selectedImage[image2] ? false : true} icon={eyeOffOutline} />
                                </li>}
                            </div>

                        </ul>

                    )}
                </Slider>

            </div>
            <div>

                <Modal ariaHideApp={false} className="Modal" isOpen={showModal}>
                    <IonGrid>
                        <IonRow clasName="ion-no-padding" style={{ justifyContent: 'center' }} >
                            <IonCol sizeXs="13" sizeSm="13" sizeMd="9" sizeLg="7" sizeXl="7" >
                                <Slider style={{ maxHeight: "768px" }} asNavFor={nav2} ref={slider => (slider2.current = slider)}  {...viewSettings}>
                                    {(images).map((image, i) =>
                                        <div>
                                            <br />
                                            <img src={image} />
                                        </div>

                                    )}
                                </Slider>
                                <br/>
                                <IonItem lines="none">
                                    <IonButton size="small" color="secondary" slot="end" onClick={() => setShowModal(false)}>close</IonButton>
                                </IonItem>
                            </IonCol>
                        </IonRow>
                    </IonGrid>
                </Modal>

            </div>
        </>
    )
}
export default SliderComponent;

Answer 1

您不应该使用 splice 或 pop 从数组中删除项目，因为它会直接改变 react 状态。您可以使用 filter 函数来删除该项目。 filter 函数返回一个新数组而不修改原始数组。

const newArr = selectedImage.filter(item => item !== image1);
setSelectedImage(newArr);