State rendering problem caused by not understanding state
I've had this ongoing problem with trying to separate my Display component from my Gallery component. Keeping the Display inside the Gallery was working, but it was obviously poor design, and it made the Gallery component much too complex. I've renamed Gallery to FilteredGallery, to differentiate from a much simpler component I'm using on my homepage (SimpleGallery - fetches a list and displays the first n images). Planning to make a RandomGallery that displays random selection, but haven't got there yet.
Anyway, my ImageDisplay is slightly complicated because, while the image itself is pretty straightforward, the detail information gets tricky. I'm currently using Cloudinary's custom meta fields to store all the details associated with each image (e.g. title, description, medium, price, etc). Though I'm pretty sure I'm going to have to augment that at some point, it should be sufficient for the time being. However, the only way to input the meta fields is via the Cloudinary Console (default management app built into my Cloudinary account) - right now, meta fields are technically a beta feature, so even if I had my own custom app for uploading images, I'd still have to use the Console to set field values. Point is, there's no way to enforce the fields, or to check whether all my images have certain fields, short of manually scrolling through every image and looking at all the fields. And even if I did that for every image I have right now, I can't write code that assumes the presence of any fields without setting myself up for errors later on, since eventually I will forget to fill in a field.
The way to access a custom field named fieldName via the JSON picture object returned from my Gallery fetch is:
picture.context.custom[fieldName]
So to prevent errors, I have to check each object for the presence of each property, and then assemble a useful data object based on the results. For example, to know if an image is for sale (that is, the original painting, not a reproduction), I can check for the presence of the 'price' property with
{ picture.hasOwnProperty('context') && picture.context.custom.hasOwnProperty('price') }
(Fortunately, I know from Cloudinary's API docs that anything with a 'context' will also have a 'context.custom', so at least I don't have to check that.) Even so, I can't just have a detail section that displays data straight from the JSON object. Rather, all the fields have to be read in such a way as I can gather the information I want without anything blowing up.
Right. So, the point is, I originally made an ImageDisplay component that took the previously-fetched picture object from the gallery, which contained an ID that would generate the image source as well as all the custom meta fields. And then I turned all those meta fields into useful information, which I placed in the State object of the display component, where I could reference it easily. I just had to update all the data every time a different thumbnail got clicked in my gallery. Only, when I told my ImageDisplay object to refresh these fields every time the currentImage property was updated (ie somebody clicked a different thumbnail), I would instantly hit a stack overflow.
Anyway, my ImageDisplay is slightly complicated because, while the image itself is pretty straightforward, the detail information gets tricky. I'm currently using Cloudinary's custom meta fields to store all the details associated with each image (e.g. title, description, medium, price, etc). Though I'm pretty sure I'm going to have to augment that at some point, it should be sufficient for the time being. However, the only way to input the meta fields is via the Cloudinary Console (default management app built into my Cloudinary account) - right now, meta fields are technically a beta feature, so even if I had my own custom app for uploading images, I'd still have to use the Console to set field values. Point is, there's no way to enforce the fields, or to check whether all my images have certain fields, short of manually scrolling through every image and looking at all the fields. And even if I did that for every image I have right now, I can't write code that assumes the presence of any fields without setting myself up for errors later on, since eventually I will forget to fill in a field.
The way to access a custom field named fieldName via the JSON picture object returned from my Gallery fetch is:
picture.context.custom[fieldName]
So to prevent errors, I have to check each object for the presence of each property, and then assemble a useful data object based on the results. For example, to know if an image is for sale (that is, the original painting, not a reproduction), I can check for the presence of the 'price' property with
{ picture.hasOwnProperty('context') && picture.context.custom.hasOwnProperty('price') }
(Fortunately, I know from Cloudinary's API docs that anything with a 'context' will also have a 'context.custom', so at least I don't have to check that.) Even so, I can't just have a detail section that displays data straight from the JSON object. Rather, all the fields have to be read in such a way as I can gather the information I want without anything blowing up.
Right. So, the point is, I originally made an ImageDisplay component that took the previously-fetched picture object from the gallery, which contained an ID that would generate the image source as well as all the custom meta fields. And then I turned all those meta fields into useful information, which I placed in the State object of the display component, where I could reference it easily. I just had to update all the data every time a different thumbnail got clicked in my gallery. Only, when I told my ImageDisplay object to refresh these fields every time the currentImage property was updated (ie somebody clicked a different thumbnail), I would instantly hit a stack overflow.
Comments
Post a Comment