How to re-render screen when updating array?-CodePudding

Using the image-crop-picker I am selecting an image from gallery then setting it to state. I then have the option to crop the image and in the array/state I replace the old image with the new cropped one which I am able to do so successfully but the screen doesn't update with the cropped image until I refresh it.

import ImagePicker from 'react-native-image-crop-picker';    

const [renderImages, setRenderImages] = useState([]);

//Listens for images
useEffect(() => {
    renderImages;
  }, [renderImages]);

//Pick images from gallery
  const pickGalleryImages = () => {
    let imageList = [];

    ImagePicker.openPicker({
      multiple: true,
      mediaType: 'any',
      maxFiles: 10,
      cropping: true,
    })
      .then(response => {
        response.map(imgs => {
          imageList.push(imgs.path);
        });
        setRenderImages(imageList);
      })
      .catch(() => null);
  };

//Crop image
const cropImage = item => {
    ImagePicker.openCropper({
      path: item.imgs,
      width: 400,
      height: 400,
    })
      .then(image => {
        const oldImage = renderImages.findIndex(img => img.imgs === item.imgs);
        renderImages[oldImage] = {imgs: image.path};
      })
      .catch(() => null);
  };

CodePudding user response：

It seems that cropImage is not doing setRenderImages to update the state, therefore the component is not re-rendered.

Try do a setRenderImages in cropImage:

UPDATE

For keeping existing places of images in array:

//Crop image
const cropImage = (item) => {
  ImagePicker.openCropper({
    path: item.imgs,
    width: 400,
    height: 400,
  })
    .then((image) => {
      setRenderImages((prev) => {
        const oldIndex = prev.findIndex((img) => img.imgs === item.imgs);
        const newImages = [...prev];
        newImages[oldIndex] = { imgs: image.path };
        return newImages;
      });
    })
    .catch(() => null);
};

Original

For pushing latest cropped image to start of array:

//Crop image
const cropImage = (item) => {
  ImagePicker.openCropper({
    path: item.imgs,
    width: 400,
    height: 400,
  })
    .then((image) => {
      setRenderImages((prev) => {
        const oldImages = prev.filter((img) => img.imgs !== item.imgs);
        return [{ imgs: image.path }, ...oldImages];
      });
    })
    .catch(() => null);
};

Hope this will help!

CodePudding user response：

you should use setRnderImages for update state:

//Crop image
const cropImage = item => {
    ImagePicker.openCropper({
      path: item.imgs,
      width: 400,
      height: 400,
    })
      .then(image => {
        const oldImage = renderImages.findIndex(img => img.imgs === item.imgs);
        let newImages= [...renderImages]
        newImages[oldImage] = {imgs: image.path};
        setRnderImages(newImages) 
     })
      .catch(() => null);
  };