when the component is rendered for the first time, it gets its content from an api call response and shows that. It should show an array of images(which it does), but it is repeating some of them, the component Upload double shows the first n-1 elements in the array fileListGallery, even when in the component the array fileListGallery does not have repeated values
here is the most significant part of the code involved
const [images, setimages] = useState({
previewVisible: false,
previewImage: "",
previewTitle: "",
fileListGallery: [],
fileListThumbnail: []
})
const product = useSelector(state => state.product);
const { gallery } = product;
this is the state of the component and variables from global state
useEffect(() => {
dispatch(getProductFiles(pid));
},[])
useEffect(() => {
gallery ? setimages(gallery) : null;
}, [gallery])
here I dispatch an action for getting the images from the server and assign the response to the local state, the response from the server is an array of objects(images) which is assigned to fileListGallery
example object(image)
{
"id": 187,
"url": "imageurl",
"urlBig": null,
"urlSmall": null,
"name": "file-20210617012922",
"mime": "image/jpeg",
"uid": "__AUTO__1623937098548_0__"
}
ant.design upload component returned.
const { previewVisible, previewImage, fileListGallery, fileListThumbnail, previewTitle } = images;
return (
<Upload
listType="picture-card"
fileList={fileListGallery}
onPreview={handlePreview}
onChange={(list) =>
handleChange(list, { type: "thumbnail" })
}
action={`server url`}
headers={{ 'Authorization': `Bearer ${tokenHelper.getItem('token')}` }}
onRemove={onRemoveImage}
accept="image/*"
>
fileListGallery.length >= 1 ? null : uploadButton}
</Upload>
)
