React - 拼接从状态数组中删除太多元素

Question

I'm trying to create an image gallery that has a variable number of inputs. I have successfully created an add button which will add a new element to my array that is in the state. However, when I click the button to remove an element from the array, it removes all elements except the first one. Could someone help me figure out where I'm going wrong here?

My initialization/add/remove logic in parent component:

const newImage = {
    fileName: 'placeholder.png',
    description: '',
}

const [galleryImages, setGalleryImages] = useState([newImage])

const addNewImage = () => {
    setGalleryImages(galleryImages.concat(newImage))
}

const removeImage = (index) => {
    setGalleryImages(galleryImages.splice(index, 1))
}

My image gallery component:

const ImageGallery = ({galleryImages, setGalleryImages, addNewImage, removeImage}) => {
    console.log('gallery images:', galleryImages)
    
    return(
        galleryImages.map((image, index) => {
            const fileId = 'image' + (index + 1) + 'File'
            const descriptionId = 'image' + (index + 1) + 'Description'
    
            return(
                <Card key={index} style={{marginTop: '10px'}}>
                    <Card.Body>
                        <div style={{position: 'absolute', top:'5px', right:'5px'}}>
                            <IconButton aria-label="remove" color="secondary" onClick={() => removeImage(index)}>
                                <CancelIcon />
                            </IconButton>

                        </div>
                        <Card.Title>Image {index+1}</Card.Title>
                        <Form.Group>
                            <Form.File id={fileId} />
            
                            <Form.Label>Image Description</Form.Label>
                            <Form.Control id={descriptionId} type="text" placeholder="Image description..."/>
                        </Form.Group>
                    </Card.Body>
                    { index === (galleryImages.length - 1) &&
                        <div style={{left: '0px', right:'0px', flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center', bottom: '-30px', position: 'absolute'}}>
                            <IconButton aria-label="add another image" onClick={() => addNewImage()}>
                                <AddCircleIcon style={{color: 'green', fontSize: 40, backgroundColor: 'white', borderRadius: '50%'}}/>
                            </IconButton>
                        </div>
                    }
                </Card>
            )
        })

    )
}

Answer 1

Splice mutates the array directly, which is generally disapproved in React.

While the recommended approach is using the filter method to remove, you can do it in this way if u want to use splice -

const removeImage = (index) => {
    //create a new array here with the spread operator of the original array. 
    //Without this, react won't recognize the change and the child component won't be re-rendered!
    const galleryImagesData = [...galleryImages];
    galleryImagesData.splice(index, 1)
    setGalleryImages(galleryImagesData)
}